vite.config.ts

vite在項目中常用的配置文件 如何配置

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'
const path = require('path')
function pathResolve(dir: String) {
  return path.join(__dirname, dir);
}
export default defineConfig({
  root: "",//表示項目跟目錄
  /**端口號 可改 */
  base: './',
  mode: '',//設置開發模式還是生產模式
  plugins: [vue()],
  resolve: {
    alias: [//別名配置
      // 鍵必須以斜線開始和結束
      {
        find: /\/@\//,
        replacement: pathResolve('src') + '/',
      }, {
        find: /\/@assets\//,
        replacement: pathResolve('src/assets') + '/',
      }, {
        find: /\/comp\//,
        replacement: pathResolve('../../../src/components') + '/',
      }, {
        find: /\/@router\//,
        replacement: pathResolve('src/router') + '/',
      }, {
        find: /\/@views\//,
        replacement: pathResolve('src/views') + '/',
      }, {
        find: /\/@vuex\//,
        replacement: pathResolve('src/vuex') + '/',
      }, {
        find: /\/@mock\//,
        replacement: pathResolve('src/mock') + '/',
      },
    ],
  },// 跨域設置
  css: {
    modules: {},//配置css modules的行爲
    postcss: {},
    preprocessorOptions: {//指定傳遞給css預處理器的選項
      sass: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },//關於css在項目中的相關配置
  // open: true,

  server: {
    host: "127.0.0.1",//指定服務器主機名
    port: 80,//指定服務器端口。注意：如果端口已經被使用，Vite 會自動嘗試下一個可用的端口，所以這可能不是服務器最終監聽的實際端口
    strictPort: true,//配合port,如果端口被佔用 設置爲true，就會自動退出不會嘗試尋找下一個出口
    proxy: {//關於代理的配置w
      // '/api': {
      //   target: 'https://blog.csdn.net/weixin_45292658',//表示代理的目標地址
      //   changeOrigin: true,
      //   rewrite: path => path.replace(/^\/api/, '')
      // }
    },
  },
  // 忽略導入文件類型的擴展名列表
  // build打包構建的時候需要進行的相關配置
  build: {
    target: "",//關於配置瀏覽器兼容性，轉換過程將會由esbuild執行，如果是自定義目標也可以試一個es版本、一個瀏覽器版本或者是多個數組[]
    outDir: "",//打包輸出路徑   默認爲 dist
    assetsDir: "",//指定生成靜態資源的存放路徑
    assetsInlineLimit: 4096,//kb,小於此閾值的導入或引用資源將內聯爲base64編碼，以避免額外的http請求。設置爲0 可以完全禁用此項。
    cssCodeSplit: true,//啓用/禁用 CSS 代碼拆分。當啓用時，在異步 chunk 中導入的 CSS 將內聯到異步 chunk 本身，並在塊加載時插入。
    // 如果禁用，整個項目中的所有 CSS 將被提取到一個 CSS 文件中 
    sourcemap: true,//默認爲false;構建後是否生成source map文件
    rollupOptions: {//自定義底層的RollUp打包配置，這與Rollup配置文件導出的選項相同，並將與Vite的內部Rollup選項合併

    },
    emptyOutDir: true,//boolean 如果構建輸出目錄在根目錄的話，會拋出一個警告避免刪除掉重要文件。
    commonjsOptions: {},//傳遞給@rollup/plugin-commonjs 插件的選項。
    brotliSize: false,//默認爲true 棄用/禁用壓縮大小報告，壓縮大型輸出文件可能會很慢，所以需要禁用該功能從而提高大型項目的構建功能
    chunkSizeWarningLimit: 500,//kb chunk大小警告的限制 
    terserOptions: {//相關配置  https://terser.org/docs/api-reference#minify-options
      parse: {},//如果希望指定一些其他 解析選項 則傳遞一個對象
      compress: {//默認爲空對象跳過壓縮，或者傳遞自定義壓縮選項
        drop_console: true,//移除console.log
        drop_debugger: true
      }
    }
  },
  //引入第三方配置
  optimizeDeps: {
    include: ["element-plus/lib/locale/lang/zh-cn"],
  },
})