关于vite。config。js相关配置

　　使用vite创建项目完成后会自动生成一个vite。config。js代码如下：import｛defineConfig｝fromviteimportvuefromvitejspluginvueexportdefaultdefineConfig（｛plugins：〔vue（）〕，｝）
　　当以命令方式运行vite时，vite会自动解析项目根目录下vite。config。js的文件。配置不全时，在开发环境下运行都是正常的，但是打包上线的时候就会出现各种问题。如：假设不配置base时，打包之后，访问时出现白屏。alias不配置的时候，每次引入文件需要找根目录，比较麻烦。
　　以下是vite。config。js的更多常用参数配置以及意义：import｛defineConfig｝fromvite帮手函数，这样不用jsdoc注解也可以获取类型提示importvuefromvitejspluginvueconst｛resolve｝require（path）import｛viteMockServe｝fromvitepluginmockconstlocalEnabledprocess。env。USEMOCKconstprodEnabledprocess。env。USECHUNKMOCKhttps：vitejs。devconfigexportdefault（）defineConfig（｛plugins：〔配置需要使用的插件列表vue（），viteMockServe（｛mockPath：。srcservermock，localEnabled：localEnabled，开发打包开关true时打开mockfalse关闭mockprodEnabled：prodEnabled，prodEnabled，生产打包开关这样可以控制关闭mock的时候不让mock打包到最终代码内injectCode：import｛setupProdMockServer｝from。mockProdSsetupProdMockServer（）；，logger：false，是否在控制台显示请求日志supportTs：false打开后，可以读取ts文件模块打开后将无法监视。js文件｝）〕，强制预构建插件包optimizeDeps：｛检测需要预构建的依赖项entries：〔〕，默认情况下，不在nodemodules中的，链接的包不会预构建include：〔axios〕，exclude：〔yourpackagename〕排除在优化之外｝，静态资源服务的文件夹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：｛配置cssmodules的行为modules：｛｝，postCss配置postcss：｛｝，指定传递给css预处理器的选项preprocessorOptions：｛scss：｛additionalData：injectedColor：｝｝｝，json：｛是否支持从。json文件中进行按名导入namedExports：true，若设置为true导入的json会被转为exportdefaultJSON。parse（。。）会比转译成对象字面量性能更好stringify：false｝，继承自esbuild转换选项，最常见的用例是自定义JSXesbuild：｛jsxFactory：h，jsxFragment：Fragment，jsxInject：importVuefromvue｝，本地运行配置，以及反向代理配置server：｛host：localhost，https：false，是否启用http2cors：true，为开发服务器配置CORS，默认启用并允许任何源open：true，服务启动时自动在浏览器中打开应用port：9000，strictPort：false，设为true时端口被占用则直接退出，不会尝试下一个可用端口force：true，是否强制依赖预构建hmr：false，禁用或配置HMR连接传递给chockidar的文件系统监视器选项watch：｛ignored：〔！nodemodulesyourpackagename〕｝，反向代理配置proxy：｛api：｛target：https：xxxx。com，changeOrigin：true，rewrite：（path）path。replace（api，）｝｝｝，打包配置build：｛浏览器兼容性esnextmodulestarget：modules，指定输出路径outDir：dist，生成静态资源的存放路径assetsDir：assets，小于此阈值的导入或引用资源将内联为base64编码，以避免额外的http请求。设置为0可以完全禁用此项assetsInlineLimit：4096，启用禁用CSS代码拆分cssCodeSplit：true，构建后是否生成sourcemap文件sourcemap：false，自定义底层的Rollup打包配置rollupOptions：｛｝，rollupplugincommonjs插件的选项commonjsOptions：｛｝，构建的库lib：｛｝，当设置为true，构建后将会生成manifest。json文件manifest：false，设置为false可以禁用最小化混淆，或是用来指定使用哪种混淆器booleanterseresbuildminify：terser，terser构建后文件体积更小传递给Terser的更多minify选项。terserOptions：｛｝，设置为false来禁用将构建后的文件写入磁盘write：true，默认情况下，若outDir在root目录下，则Vite会在构建时清空该目录。emptyOutDir：true，启用禁用brotli压缩大小报告brotliSize：true，chunk大小警告的限制chunkSizeWarningLimit：500｝，ssr：｛列出的是要为SSR强制外部化的依赖external：〔〕，列出的是防止被SSR外部化依赖项noExternal：〔〕｝｝）
　　好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦