环境变量

vue+webpack

webpack3 注入 环境变量：

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV1: 'production'
        }
    })
]

console.log('process.env', process.env.NODE_ENV1)

webpack4+：

提供 mode 配置选项，告知 webpack 使用相应环境的内置优化。

module.exports = {
  mode: 'production'
}

或者从 CLI 参数中传递：

webpack --mode=production

获取：

process.env.NODE_ENV

还可以使用 cross-env:

cross-env NODE_ENV=development webpack

https://v4.webpack.docschina.org/concepts/mode/

vue-cli-service

• 默认环境变量：

process.env.NODE_ENV

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

• 指定环境变量：

配置 .env.[mode] 文件，通过传递 --mode 选项参数为命令行覆写默认的模式(NODE_ENV)或新增其他全局变量，所有的环境变量都从对应的环境文件中载入。

https://cli.vuejs.org/zh/guide/mode-and-env.html

vue3+vite

Vite 自动将环境变量暴露在 import.meta.env 对象下

• 默认环境变量：

import.meta.env.MODE

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

• 指定环境变量：

配置 .env.[mode] 文件，通过 --mode 指定模式新增其他全局变量

.env.development:

VITE_BASE_URL = '/api'

获取：

import.meta.env.VITE_BASE_URL

https://cn.vitejs.dev/guide/env-and-mode.html