vite2 + vite.config.js 比較坑的環境變數，vite2模式的使用

金色海洋（jyk）發表於2021-11-21
ViteJS變數模式

想在vite.config.js 裡面判斷一下環境，看看是不是開發環境，查了一下官網（https://cn.vitejs.dev/guide/env-and-mode.html），說是 可以使用 import.meta.env.DEV 。

但是在 vite.config.js 裡面直接寫 import.meta.env.DEV 的時候 ，執行時卻報錯了。

各種查了之後，發現要折騰一下。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

const project = ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    base: loadEnv(mode, process.cwd()).DEV ? './':'nf-rollup-webstorage',
  })
}

export default project

這樣折騰之後，雖然不報錯了，但是 base 好像不太對勁的樣子。測試了一番之後發現，根本沒有讀取出來。

模式

又繼續看，發現了一個叫做“模式”的東東，簡單的說，我們可以在專案根目錄裡面設定 .env.xxx 的檔案，來存放不同模式的配置檔案。

既然這樣的話，乾脆就用模式的方式吧。
因為我的專案有三個模式：開發模式，生產模式，庫專案。

前兩個都是常規模式，只是base不一致，後面的庫專案，是因為想作為資源包發包釋出到npmjs.com裡面去。

修改 vite.config.js

首先建立三個檔案：.env、.env.project、.env.lib
分別寫入下面的內容，注意要分開寫。

VITE_BASEURL=./

VITE_BASEURL=lib

VITE_BASEURL=nf-rollup-webstorage

然後把vite.config.js改成這樣：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 主要用於alias檔案路徑別名
const pathResolve = (dir) => resolve(__dirname, '.', dir)

// 釋出庫的設定
const lib = defineConfig({
  plugins: [vue()],
  // 打包配置
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'nf-web-storage',
      fileName: (format) => `nf-web-storage.${format}.js`
    },
    sourcemap: true,
    rollupOptions: {
      // 確保外部化處理那些你不想打包進庫的依賴
      external: ['vue', 'nf-tool'],
      output: {
        // 在 UMD 構建模式下為這些外部化的依賴提供一個全域性變數
        globals: {
          vue: 'Vue',
          'nf-tool': 'nfTool'
        }
      }
    }
  }
})

// 開發模式、生產模式
const project = (url) => {
  return defineConfig({
    plugins: [vue()],
    devtools: true,
    resolve: {
      alias: {
        '/@': resolve(__dirname, '.', 'src'),
        '/nf-web-storage': pathResolve('lib/main.js') //
      }
    },
    base: url,
    // 打包配置
    build: {
      sourcemap: true,
      outDir: 'distp', //指定輸出路徑
      assetsDir: 'static/img/', // 指定生成靜態資源的存放路徑
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js1/[name]-[hash].js',
          entryFileNames: 'static/js2/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        },
        brotliSize: false, // 不統計
        target: 'esnext', 
        minify: 'esbuild' // 混淆器，terser構建後檔案體積更小
      }
    }
  })
}

// 判斷型別，返回對應的 defineConfig
 
export default ({ mode }) => {
  const url = loadEnv(mode, process.cwd()).VITE_BASEURL
  switch (url) {
    case 'lib': // 打包庫檔案
      return lib
      break;
    
    default: // 開發模式、生產模式
      return project(url)
      break;
  }
}

修改 package.json

模式和 vite.config.js 都設定好了，那麼如何使用呢？我們需要改一下 package.json 的 script

 "scripts": {
    "dev": "vite",
    "build": "vite build --mode project",
    "lib": "vite build --mode lib",
    "serve": "vite preview"
  }

然後輸入對應命令即可。

yarn dev // 開發模式
yarn build // 釋出專案
yarn lib // 釋出庫

以前各種改 vite.config.js ，現在就不用改檔案了。

相關文章