Vite4配置环境变量

Vite4项目终于上线了，区分环境打包肯定绕不过，刚好最近要上线了，记录下环境配置方法；

项目依赖

"@types/node": "^20.2.5",
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.59.0",
"@typescript-eslint/parser": "^5.59.0",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"typescript": "^4.9.3",
"vite": "^4.3.9",
"vite-plugin-style-import": "^2.0.0"

根目录新建viteEnv文件夹

> dist
> public
> src
> viteEnv
package.json

viteEnv创建环境变量3个文件

// 1.创建 '.env.development' 文件
VITE_APP_ENV='本地环境'
// 2.创建 '.env.test' 文件
VITE_APP_ENV='测试环境'
// 3.创建 '.env.prod' 文件
VITE_APP_ENV='正式环境'

package.json指定环境变量

/* 备注:
    --mode和viteEnv创建文件一一对应
   举例：
   --mode test 对应 .env.test
*/
"scripts": {
    "serve": "vite --mode development",
    "build_test": "tsc && vite build --mode test",
    "build": "tsc && vite build --mode prod"
},

配置vite.config

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

export default defineConfig(({command, mode}) => {
    /* 官方写法：process.cwd()，可以理解为当前目录就是和vite.config文件同级目录
        根据当前工作目录中的 `mode` 加载 .env 文件
        设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀
        const env = loadEnv(mode, process.cwd(), '')
    */
    const env = loadEnv(mode, path.resolve(__dirname, 'viteEnv'));
    return {
        base: "./",
        envDir: './viteEnv',
        plugins: [
          react(),
        ],
        css: {
          preprocessorOptions: {
            less: { // 配置全局less
              additionalData: `@import '/src/assets/style/global.less';`,
            }
          }
        },
        resolve: { // 配置别名
          alias: {
            '@': path.resolve(__dirname, 'src')
          },
          extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
        },
        server: { // 启动端口
          host: "127.0.0.1",
          port: 5174,
          open: true
        },
    }
})

使用

// 结果：{..., VITE_APP_ENV: '本地环境', ...}
console.log('打印当前运行环境', import.meta.env);
// 结果： '本地环境'
console.log('打印当前运行环境', import.meta.env.VITE_APP_ENV);