vue正式环境和测试环境切换
目的:根据不同的启动命令应用对应环境的域名及其它变量值创建配置文件:在项目根目录下创建这四个文件,作用及含义分别为:.env:公用配置文件,不管在哪个环境启动的项目,都会使用这个文件里面的变量,下面三个文件里和此文件同名的变量会覆盖.env里的变量,不同名就合并,也就是说.env里的同名变量优先级更低;.env.development:开发环境,默认不指定任何环境启动时就使用这个文件里的变量;.e
目的:
根据不同的启动命令应用对应环境的域名及其它变量值
创建配置文件:
在项目根目录下创建这四个文件,作用及含义分别为:
.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
更多推荐
所有评论(0)