vue脚手架配置环境变量

开发中有测试环境,开发环境,他们的后端url接口都不一样,有些插件需要在测试环境使用,而到了生产环境就不需要使用,比如移动端的调试神器vconsole,到了生产环境就不需要用了

具体配置如下

首先在跟目录创建三个文件
分别是.env.development、.env.production、.env.staging三个文件
 
vue脚手架配置环境变量

 

 

1 // .env.development文件里编写,NODE_ENV default is development
2 # just a flag
3 ENV = ‘development‘
4 
5 VUE_APP_ENV = ‘development‘
6 # base api
7 VUE_APP_BASE_API = ‘/dev-api‘

 

1 // .env.production文件里编写 NODE_ENV default is production
2 # just a flag
3 ENV = ‘production‘
4 
5 VUE_APP_ENV = ‘production‘
6 # base api
7 VUE_APP_BASE_API = ‘/prod-api‘

 

1 // .env.staging文件里编写
2 NODE_ENV = ‘production‘ // 生产环境
3 
4 # just a flag
5 ENV = ‘staging‘
6 
7 VUE_APP_ENV = ‘staging‘
8 # base api
9 VUE_APP_BASE_API = ‘/stage-api‘

 

然后src下面建立config文件夹

vue脚手架配置环境变量

 

 

每个文件的配置都不太一样
 
 1 // env.development.js
 2 // 本地环境配置
 3 module.exports = {
 4   title: ‘vue-h5-template‘,
 5   baseUrl: ‘http://localhost:9018‘, // 项目地址
 6   baseApi: ‘https://test.xxx.com/api‘, // 本地api请求地址,注意:如果你使用了代理,请设置成‘/‘
 7   APPID: ‘xxx‘,
 8   APPSECRET: ‘xxx‘,
 9   $cdn: ‘https://imgs.solui.cn‘,
10   flag: ‘开发环境‘
11 }

 

 1 // env.production.js
 2 // 正式
 3 module.exports = {
 4   title: ‘vue-h5-template‘,
 5   baseUrl: ‘https://www.xxx.com/‘, // 正式项目地址
 6   baseApi: ‘https://www.xxx.com/api‘, // 正式api请求地址
 7   APPID: ‘xxx‘,
 8   APPSECRET: ‘xxx‘,
 9   $cdn:‘https://imgs.solui.cn‘,
10   flag: ‘正式‘
11 }

 

 1 // env.staging.js
 2 module.exports = {
 3     title: ‘vue-h5-template‘,
 4     baseUrl: ‘https://test.xxx.com‘, // 测试项目地址
 5     baseApi: ‘https://test.xxx.com/api‘, // 测试api请求地址
 6     APPID: ‘xxx‘,
 7     APPSECRET: ‘xxx‘,
 8     $cdn: ‘https://imgs.solui.cn‘,
 9     flag: ‘测试‘
10 }

 

1 // index.js
2 console.log(process.env, ‘process.env‘, process);
3 // 通过cmd跑的命令确定是哪个环境process.env.VUE_APP_ENV,所引入的文件
4 const config = require(‘./env.‘ + process.env.VUE_APP_ENV) 
5 module.exports = config // 把跑的命令的环境的文件导出去

 

然后修改package.json里面的script
 
 
1 // 添加命令
2 "build:stage": "vue-cli-service build --mode staging",
3 "build:prod": "vue-cli-service build",

 

vue脚手架配置环境变量

 

 

如果打包出来的是空白页面和报错路径的错就这么解决

 

1 // 在vue.config.js里把publicPath: ‘/‘改成publicPath: ‘./‘

 

vue脚手架配置环境变量

 

 

ok

vue脚手架配置环境变量

上一篇:docker 网络


下一篇:UTF-8 BOM对PHP的影响