Vite - vite.config.js 的一些配置（base、resolve、server）

一、base

1、基本介绍

• base 用于设置开发或生产环境服务的公共基础路径

类型：string 默认值：/

2、演示

1. 部署在根路径

base:'/'// 例如，https://example.com/

<!-- 此时生成的 HTML 中的资源引用会变为如下 --><scriptsrc="/assets/index.js"></script>

2. 部署在子路径

base:'/my-app/'// 例如，https://example.com/my-app/

<!-- 此时生成的 HTML 中的资源引用会变为如下 --><scriptsrc="/my-app/assets/index.js"></script>

3. 如果无法提前确定基础路径，可以使用"base": "./"或"base": ""设置相对基础路径

<!-- 此时生成的 HTML 中的资源引用会变为如下 --><scriptsrc="./assets/index.js"></script><!-- 浏览器会从当前 HTML 文件的所在目录请求 --><!-- 如果 HTML 在 https://example.com/my-app/index.html --><!-- 则请求 https://example.com/my-app/assets/index.js -->

3、开发环境与生产环境

import{defineConfig,loadEnv}from"vite";exportdefaultdefineConfig(({mode,command})=>{constenv=loadEnv(mode,process.cwd());const{VITE_APP_ENV}=env;return{base:VITE_APP_ENV==="production"?"/my-app/":"/",...};});

二、resolve

1、alias

（1）基本介绍

• alias 用于设置路径别名，方便在其他地方引用模块

（2）演示

alias:{"~":path.resolve(__dirname,"./"),"@":path.resolve(__dirname,"./src"),}

1. __dirname是当前执行脚本的目录，即vite.config.js所在目录

2. 别名~指向的是当前目录的根目录

3. 别名@指向的是当前目录下的src目录

2、extensions

• 导入时想要省略的扩展名列表，不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持

类型：string[] 默认值：['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

三、server

1、port

• port 用于指定开发服务器端口

类型：number 默认值：5173

2、host

• port 用于指定服务器应该监听哪个 IP 地址，如果将此设置为0.0.0.0或者true将监听所有地址

类型：string | boolean 默认值：'localhost'

3、open

• open 用于开发服务器启动时，自动在浏览器中打开应用程序

类型：boolean | string

4、proxy

（1）基本介绍

• proxy 用于为开发服务器配置自定义代理规则

（2）演示

1. 这里发送的原请求为http://localhost/api/test

2. 代理为了https://www.example.com/api/test

3. 即开启代理服务器，拦截到了有api/test的请求

4. 将http://localhost换成了https://www.example.com，api/test保持不变

5. rewrite 用于对路径进行处理，如果没有该配置项，则不对路径进行处理

6. 这里console.log(p);输出结果为/api/test

7. return p;这里返回对路径/api/test的处理结果，这里相当于没有对路径进行处理，相当于没有 proxy 配置项

proxy:{"/api/test":{target:"https://www.example.com",changeOrigin:true,rewrite:(p)=>{returnp;},},}