一、base1、基本介绍base 用于设置开发或生产环境服务的公共基础路径类型string 默认值/2、演示部署在根路径base:/// 例如https://example.com/!-- 此时生成的 HTML 中的资源引用会变为如下 --scriptsrc/assets/index.js/script部署在子路径base:/my-app/// 例如https://example.com/my-app/!-- 此时生成的 HTML 中的资源引用会变为如下 --scriptsrc/my-app/assets/index.js/script如果无法提前确定基础路径可以使用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}fromvite;exportdefaultdefineConfig(({mode,command}){constenvloadEnv(mode,process.cwd());const{VITE_APP_ENV}env;return{base:VITE_APP_ENVproduction?/my-app/:/,...};});二、resolve1、alias1基本介绍alias 用于设置路径别名方便在其他地方引用模块2演示alias:{~:path.resolve(__dirname,./),:path.resolve(__dirname,./src),}__dirname是当前执行脚本的目录即vite.config.js所在目录别名~指向的是当前目录的根目录别名指向的是当前目录下的src目录2、extensions导入时想要省略的扩展名列表不建议忽略自定义导入类型的扩展名例如.vue因为它会影响 IDE 和类型支持类型string[] 默认值[.mjs, .js, .mts, .ts, .jsx, .tsx, .json]三、server1、portport 用于指定开发服务器端口类型number 默认值51732、hostport 用于指定服务器应该监听哪个 IP 地址如果将此设置为0.0.0.0或者true将监听所有地址类型string | boolean 默认值localhost3、openopen 用于开发服务器启动时自动在浏览器中打开应用程序类型boolean | string4、proxy1基本介绍proxy 用于为开发服务器配置自定义代理规则2演示这里发送的原请求为http://localhost/api/test代理为了https://www.example.com/api/test即开启代理服务器拦截到了有api/test的请求将http://localhost换成了https://www.example.comapi/test保持不变rewrite 用于对路径进行处理如果没有该配置项则不对路径进行处理这里console.log(p);输出结果为/api/testreturn p;这里返回对路径/api/test的处理结果这里相当于没有对路径进行处理相当于没有 proxy 配置项proxy:{/api/test:{target:https://www.example.com,changeOrigin:true,rewrite:(p){returnp;},},}