• vite.config.js常用配置

import { defineConfig } from 'vite'
import { resolve } from "path";
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue(), ], // 配置需要使用的插件列表base: './',   // 在生產中服務時的基本公共路徑publicDir: 'public',  // 靜態資源服務的文件夾, 默認"public"resolve: {alias: {"@": path.resolve(__dirname, './src'), }},// 引入第三方的配置,強制預構建插件包optimizeDeps: {include: ['echarts', 'axios', 'mockjs'],},css: {preprocessorOptions: {scss: {charset: false, // 關閉編譯時 字符編碼 報錯問題javascriptEnabled: true,additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/var.scss')}";`,},},},json: { //是否支持從 .json 文件中進行按名導入 namedExports: true,//若設置為 true 導入的json會被轉為 export default JSON.parse("..") 會比轉譯成對象字面量性能更好 stringify:false, },//繼承自 esbuild 轉換選項，最常見的用例是自定義 JSX esbuild: { jsxFactory: "h",jsxFragment: "Fragment", jsxInject:`import Vue from 'vue'`},// 打包配置build: {target: 'modules', // 設置最終構建的瀏覽器兼容目標。modules:支持原生 ES 模塊的瀏覽器outDir: 'dist', // 指定輸出路徑assetsDir: 'assets', // 指定生成靜態資源的存放路徑assetsInlineLimit: '4096', // 小于此閾值的導入或引用資源將內聯為base64編碼，設置為0可禁用此項。默認4096（4kb）cssCodeSplit: true, // 啟用/禁用CSS代碼拆分，如果禁用，整個項目的所有CSS將被提取到一個CSS文件中,默認truesourcemap: false, // 構建后是否生成 source map 文件minify: 'terser', // 混淆器，terser構建后文件體積更小write: true,   //設置為 false 來禁用將構建后的文件寫入磁盤  emptyOutDir: true,  //默認情況下，若 outDir 在 root 目錄下，則 Vite 會在構建時清空該目錄。  brotliSize: true,  //啟用/禁用 brotli 壓縮大小報告 chunkSizeWarningLimit: 500,  //chunk 大小警告的限制 terserOptions: {   compress: { drop_console: true,drop_debugger: true, },},   //去除 console debugger},// 本地運行配置，及反向代理配置server: {// host: 'localhost', // 指定服務器主機名port: 9191, // 指定服務器端口open: false, // 在服務器啟動時自動在瀏覽器中打開應用程序strictPort: false, // 設為 false 時，若端口已被占用則會嘗試下一個可用端口,而不是直接退出https: false, // 是否開啟 httpscors: true, // 為開發服務器配置 CORS。默認啟用并允許任何源proxy: { // 為開發服務器配置自定義代理規則'/api': {target: 'http://192.168.xxx.xxx:xxxx', changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})