vue项目中webpack和vite配置环境变量对比

环境变量

在项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

.env.development文件：开发环境（mode=developmen）载入的变量

.env.production文件：生产环境（mode=production）载入的变量

环境文件加载优先级

如果当前为生产环境时，.env和.env.production文件具有相同的变量，则.env.production文件拥有更高的优先级。

webpack构建的vue项目

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

// .env文件
VUE_APP_API_URL=https://api.a.com

console.log(process.env.VUE_APP_API_URL) // https://api.a.com

模式

package.json文件下的scripts执行脚本配置运行模式

"scripts": {
    "serve": "vue-cli-service serve --mode developmen",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }

vue-cli-service serve的模式默认为development;

// npm run serve
console.log(process.env.NODE_ENV === 'development') // true

vue-cli-service build的模式默认为production;

// npm run build
console.log(process.env.NODE_ENV === 'production') // true

自定义脚本及执行模式

"scripts": {
    // ...
    "test": "vue-cli-service serve --mode test"
  }

当执行npm run test时, 会自动加载.env.test文件里的变量。

参考： vue-cli环境变量和模式官方文档

vite构建的vue项目

vite项目中的环境变量需要以VITE_开头。你可以在应用的代码中这样访问它们：

// .env文件
VITE_APP_API_URL=https://api.a.com

console.log(import.meta.env.VITE_APP_API_URL) // https://api.a.com

模式

package.json文件下的scripts执行脚本配置运行模式

"scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "preview": "vite preview"
  }

vite dev的模式默认为development;

// npm run dev
console.log(import.meta.env.MODE === 'development') // true

vite build的模式默认为production;

// npm run build
console.log(import.meta.env.MODE === 'production') // true

在vite配置文件获取环境变量

.env.development

VITE_APP_TITLE=My App

vite.config.js

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig(({mode}) => {
  // npm run dev时
  console.log('mode', mode) // development
  console.log(process.cwd())  // D:\study\vue3\env 
  // 获取对应模式下的以VITE_开头的环境变量
  const env = loadEnv(mode, process.cwd(), 'VITE_')
  console.log('env', env) // { VITE_APP_TITLE: 'My App' }
  return {
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
})

自定义脚本及执行模式

"scripts": {
    // ...
    "test": "vite --mode test"
  }

当执行npm run test时, 会自动加载.env.test文件里的变量。

参考： vite环境变量和模式官方文档

区别

webpack和vite配置环境变量主要区别：

• VUE_APP_开头和VITE_开头
• process.env访问和import.meta.env访问
• vite配置文件访问变量需要引入loadEnv函数