前端开发切换环境

本质就是判断是生产环境还是开发环境，或者测试环境的切换，需要对的变量进行修改

一般通过环境变量、配置文件、代理来实现切换

对于Webpack开发环境

https://www.webpackjs.com/configuration/mode/

使用全局变量 process.env.NODE_ENV 来区分开发环境（ development ）还是生产环境（ production ），它会返回当前所处环境的名称

if (process.env.NODE_ENV === 'development') {
  // 开发环境配置
} else if (process.env.NODE_ENV === 'production') {
  // 生产环境配置
} else {
  // 测试环境配置
}

Vue cli+Webpack的env文件配置

对于使用 Vue cli创建的项目，.env文件创建在项目根目录可以直接使用

每次修改环境变量，重启devserver生效

环境变量前添加 VUE_APP_ 就可以,使用同理

.env

TEST=test
VUE_APP_IDENTIFIER=11@vov.vom
VUE_APP_PASSWORD=1234@.vom

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

// { "NODE_ENV": "development", "VUE_APP_IDENTIFIER": "11@vov.vom", "VUE_APP_PASSWORD": "1234@.vom", "BASE_URL": "" }
// 只能识别到 VUE_APP_ 开头的内容
console.log(process.env)

// "1234@.vom"
console.log(process.env.VUE_APP_PASSWORD)

Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')

要获取不是以 VUE_APP_ 开头的内容

推荐库 dotenv

npm install dotenv

// App.js
require('dotenv').config()

实现切换环境不同的env文件配置

在目录下新建 .env.development .env.production .env.test

通过启动参数--mode development 来实现切换配置文件

{
  "name": "@demo/haha",
  "version": "0.1.4",
  "private": true,
  "scripts": {
     // 读取 .env
    "serve": "vue-cli-service serve",
    // 读取 .env.development
    "serve:development": "vue-cli-service serve --mode development",
   	// 读取 .env.production
    "serve:production": "vue-cli-service serve --mode production",
    // 读取 .env.test
    "serve:test": "vue-cli-service serve --mode test",
  },
  // ...
}

对于Vite 开发服务器

通过判断 import.meta.env.DEV 为 true 时是开发环境，判断 import.meta.env.PROD 为 true 时是生产环境（这两个值永远相反）

• import.meta.env.PROD: {boolean} 应用是否运行在生产环境（使用 NODE_ENV='production' 运行开发服务器或构建应用时使用 NODE_ENV='production' ）。

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

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

环境加载优先级

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。

另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

js

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

此外，Vite 使用 dotenv-expand 来直接拓展变量。想要了解更多相关语法，请查看 它们的文档。

请注意，如果想要在环境变量中使用 $ 符号，则必须使用 \ 对其进行转义。

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

如果你想自定义 env 变量的前缀，请参阅 envPrefix。

安全注意事项

• .env.*.local 文件应是本地的，可以包含敏感变量。你应该将 *.local 添加到你的 .gitignore 中，以避免它们被 git 检入。
• 由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，VITE_* 变量应该不包含任何敏感信息。

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