目的:
根据不同的启动命令应用对应环境的域名及其它变量值

创建配置文件:
在这里插入图片描述
在项目根目录下创建这四个文件,作用及含义分别为:
.env:公用配置文件,不管在哪个环境启动的项目,都会使用这个文件里面的变量,下面三个文件里和此文件同名的变量会覆盖.env里的变量,不同名就合并,也就是说.env里的同名变量优先级更低;
.env.development:开发环境,默认不指定任何环境启动时就使用这个文件里的变量;
.env.staging:测试环境,在 package.json 启动命令后加 --mode staging 指定以此环境启动
.env.production:正式环境,在 package.json 启动命令后加 --mode production 指定以此环境启动

为什么 --mode staging 就能指定启动测试环境?
因为它对应着 .env.staging 文件名里的 staging,这三个文件名都是固定的。

文件示例
.env

VUE_APP_VALUE = "common value"
VUE_APP_VALUE1 = "common value1"

.env.development

VUE_APP_VALUE1 = "development value1"

.env.production

VUE_APP_VALUE = "production value"
VUE_APP_VALUE1 = "production value1"

package.json 配置

  "scripts": {
    "serve": "vue-cli-service serve", // 启动开发环境
    "staging": "vue-cli-service serve --mode staging", // 启动测试环境
    "production": "vue-cli-service serve --mode production", // 启动正式环境
    "build": "vue-cli-service build", // 构建正式环境
    "build2": "vue-cli-service build --mode staging", // 构建测试环境
    "build3": "vue-cli-service build &&vue-cli-service build --mode staging", // 同时构建正式环境和测试环境
  },

启动测试环境:npm run serve
此时取这两个变量值:

console.log(process.env.VUE_APP_VALUE) // common value
console.log(process.env.VUE_APP_VALUE1) // development value1

启动正式环境:npm run production

console.log(process.env.VUE_APP_VALUE) // production value
console.log(process.env.VUE_APP_VALUE1) // production value1
Logo

前往低代码交流专区

更多推荐