vite2 實戰配置

簡介：新項目，新氣象，選擇了激進的技術棧，vite2 常用配置。

項目目錄

.
├── README.md
├── build.sh #打包腳本
├── commitlint.config.js
├── index.html
├── mock #mock
│   ├── index.ts
│   └── list.ts
├── package.json
├── postcss.config.js
├── public #靜态檔案
│   ├── data.json
│   ├── favicon.ico
│   └── tinymce
├── src
│   ├── App.vue #根元件
│   ├── api  #接口
│   ├── assets #資源
│   ├── components #元件
│   ├── hooks #hooks
│   ├── icons #svg圖示
│   ├── layout #頁面布局
│   ├── locales #國際化配置
│   ├── main.ts #項目入口
│   ├── permission.ts #權限處理，導航守衛
│   ├── plugins #插件，包含指令，UI庫等
│   ├── router #路由
│   ├── store #資料倉庫
│   ├── styles #全局樣式和樣式變量
│   ├── types #ts類型
│   ├── utils #工具函數
│   └── views #頁面
├── tsconfig.json #ts項目配置
├── update.sh #送出代碼腳本
├── vite.config.ts #vite項目配置
└── yarn.lock
           

vite.config.ts

import { resolve } from 'path'
import { defineConfig, loadEnv, UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import html from 'vite-plugin-html'
import viteSvgIcons from 'vite-plugin-svg-icons'
import viteCompression from 'vite-plugin-compression'
import { viteMockServe } from 'vite-plugin-mock'

const pathResolve = (dir: string): string => resolve(__dirname, '.', dir)

// https://vitejs.dev/config/
const config = ({ command, mode }: ConfigEnv): UserConfigExport => {
  // 環境變量
  const env = loadEnv(mode, process.cwd())
  // 生産環境判斷
  const isEnvProduction = mode === 'production'
  // vite插件
  const plugins = [
    vue(),

    /**
     *  注入環境變量到html模闆中
     *  如在  .env檔案中有環境變量  VITE_APP_TITLE=admin
     *  則在 html模闆中  可以這樣擷取  <%- VITE_APP_TITLE %>
     *  文檔：  https://github.com/anncwb/vite-plugin-html
     */
    html({
      inject: {
        injectData: { ...env }
      },
      minify: true
    }),

    /**
     *  把src/icons 下的所有svg 自動加載到body下，供元件使用
     *  類似于webpack中的svg-sprite-loader
     *  文檔：https://github.com/anncwb/vite-plugin-svg-icons
     */
    viteSvgIcons({
      // 指定需要緩存的圖示檔案夾
      iconDirs: [resolve(process.cwd(), 'src/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]'
    })
  ]

  if (isEnvProduction) {
    plugins.push(
      // 相容插件
      legacy({
        targets: ['defaults', 'not IE 11']
      }),

      // gzip插件，打包壓縮代碼成gzip  文檔： https://github.com/anncwb/vite-plugin-compression
      viteCompression()
    )
  } else {
    plugins.push(
      // mock  文檔：https://github.com/anncwb/vite-plugin-mock
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
        logger: true
      })
    )
  }
  
  return defineConfig({
    // 基礎路徑，配合vue-router的createWebHashHistory使用
    base: './',
    plugins,
    define: {
      // setting vue-i18-next
      // Suppress warning
      __VUE_I18N_LEGACY_API__: false,
      __VUE_I18N_FULL_INSTALL__: false,
      __INTLIFY_PROD_DEVTOOLS__: false
    },
    server: {
      port: 8888,
      open: true
    },
    // alias 現在會被傳遞給 @rollup/plugin-alias 并不再需要開始/結尾處的斜線了。
    // 此行為目前是一個直接替換，是以 1.0 風格的目錄别名需要删除其結尾處的斜線：
    resolve: {
      alias: [
        { find: '@', replacement: pathResolve('src') },
        // 解決警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
        }
      ]
    },
    build: {
      target: 'es2015',
      outDir: 'dist',
      assetsDir: 'assets',
      assetsInlineLimit: 2048,
      cssCodeSplit: true,
      // Terser 相對較慢，但大多數情況下建構後的檔案體積更小。ESbuild 最小化混淆更快但建構後的檔案相對更大。
      minify: !isEnvProduction ? 'esbuild' : 'terser',
      terserOptions: {
        compress: {
          // 生産環境去除console
          drop_console: isEnvProduction
        }
      }
    }
  })
}

export default config
           

參考連結

1.https://cn.vitejs.dev/