爱站程序员基地使用 vite 创建项目完成后会自动生成 一个 vite.config.js 代码如下：
import { defineConfig } from \'vite\'import vue from \'@vitejs/plugin-vue\'export default defineConfig({plugins: [vue()],})
当以命令方式运行 vite 时，vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时，在开发环境下运行都是正常的，但是打包上线的时候就会出现各种问题。如：
- 假设不配置 base 时，打包之后，访问时出现白屏。
- alias 不配置的时候，每次引入文件需要找根目录，比较麻烦。
以下是 vite.config.js 的更多常用参数配置以及意义：
import { defineConfig } from \'vite\' // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示import vue from \'@vitejs/plugin-vue\'const { resolve } = require(\'path\')import { viteMockServe } from \"vite-plugin-mock\"const localEnabled = process.env.USE_MOCK || false;const prodEnabled = process.env.USE_CHUNK_MOCK || false;// https://vitejs.dev/config/export default () => defineConfig({plugins: [ //配置需要使用的插件列表vue(),viteMockServe({mockPath: \"./src/server/mock\",localEnabled: localEnabled, // 开发打包开关 true时打开mock false关闭mockprodEnabled: prodEnabled,//prodEnabled, // 生产打包开关// 这样可以控制关闭mock的时候不让mock打包到最终代码内injectCode: `import { setupProdMockServer } from \'./mockProdServer\';setupProdMockServer();`,logger: false, //是否在控制台显示请求日志supportTs:false //打开后，可以读取 ts 文件模块 打开后将无法监视 .js 文件})],// 强制预构建插件包optimizeDeps: {//检测需要预构建的依赖项entries: [],//默认情况下，不在 node_modules 中的，链接的包不会预构建include: [\'axios\'],exclude:[\'your-package-name\'] //排除在优化之外},//静态资源服务的文件夹publicDir: \"public\",base: \'./\',//静态资源处理assetsInclude: \"\",//控制台输出的级别 info 、warn、error、silentlogLevel: \"info\",// 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息clearScreen:true,resolve: {alias: [//配置别名{ find: \'@\', replacement: resolve(__dirname, \'src\') }],// 情景导出 package.json 配置中的exports字段conditions: [],// 导入时想要省略的扩展名列表// 不建议使用 .vue 影响IDE和类型支持extensions:[\'.mjs\',\'.js\',\'.ts\',\'.jsx\',\'.tsx\',\'.json\']},// csscss: {// 配置 css modules 的行为modules: { },// postCss 配置postcss: {},//指定传递给 css 预处理器的选项preprocessorOptions:{scss: {additionalData:`$injectedColor:orange;`}}},json: {//是否支持从 .json 文件中进行按名导入namedExports: true,//若设置为 true 导入的json会被转为 export default JSON.parse(\"..\") 会比转译成对象字面量性能更好stringify:false},//继承自 esbuild 转换选项，最常见的用例是自定义 JSXesbuild: {jsxFactory: \"h\",jsxFragment: \"Fragment\",jsxInject:`import Vue from \'vue\'`},//本地运行配置，以及反向代理配置server: {host: \"localhost\",https: false,//是否启用 http 2cors: true,//为开发服务器配置 CORS , 默认启用并允许任何源open: true,//服务启动时自动在浏览器中打开应用port: \"9000\",strictPort: false, //设为true时端口被占用则直接退出，不会尝试下一个可用端口force: true,//是否强制依赖预构建hmr: false,//禁用或配置 HMR 连接// 传递给 chockidar 的文件系统监视器选项watch: {ignored:[\"!**/node_modules/your-package-name/**\"]},// 反向代理配置proxy: {\'/api\': {target: \"https://xxxx.com/\",changeOrigin: true,rewrite: (path) => path.replace(/^\\/api/, \'\')}}},//打包配置build: {//浏览器兼容性 \"esnext\"|\"modules\"target: \"modules\",//指定输出路径outDir: \"dist\",//生成静态资源的存放路径assetsDir: \"assets\",//小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项assetsInlineLimit: 4096,//启用/禁用 CSS 代码拆分cssCodeSplit: true,//构建后是否生成 source map 文件sourcemap: false,//自定义底层的 Rollup 打包配置rollupOptions: {},//@rollup/plugin-commonjs 插件的选项commonjsOptions: {},//构建的库lib: {},//当设置为 true，构建后将会生成 manifest.json 文件manifest: false,// 设置为 false 可以禁用最小化混淆，// 或是用来指定使用哪种混淆器// boolean | \'terser\' | \'esbuild\'minify: \"terser\", //terser 构建后文件体积更小//传递给 Terser 的更多 minify 选项。terserOptions: {},//设置为 false 来禁用将构建后的文件写入磁盘write: true,//默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。emptyOutDir: true,//启用/禁用 brotli 压缩大小报告brotliSize: true,//chunk 大小警告的限制chunkSizeWarningLimit: 500},ssr: {// 列出的是要为 SSR 强制外部化的依赖external: [],//列出的是防止被 SSR 外部化依赖项noExternal: []}})
好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦
