關於 vite.config.js 相關配置，拿走不謝

使用 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關閉mock
   prodEnabled: 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、silent
 logLevel: "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']  
 },
 // css
 css: {
  // 配置 css modules 的行為
  modules: {  },
  // postCss 配置
  postcss: {
  },
  //指定傳遞給 css 預處理器的選項
  preprocessorOptions:{
   scss: {
    additionalData:`$injectedColor:orange;`
   }
  }
 },
 json: {
  //是否支持從 .json 文件中進行按名導入
  namedExports: true,
  //若設置為 true 導入的json會被轉為 export default JSON.parse("..") 會比轉譯成對象字面量性能更好
  stringify:false
 },
 //繼承自 esbuild 轉換選項，最常見的用例是自定義 JSX
 esbuild: {
  jsxFactory: "h",
  jsxFragment: "Fragment",
  jsxInject:`import Vue from 'vue'`
 },
 //本地運行配置，以及反向代理配置
 server: {
  host: "localhost",
  https: false,//是否啟用 http 2
  cors: 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: [
  ]
 }
})

 

---

好了小編今天的文章就到此結束了，喜歡我的可以點個關注哦