vue-cli3.0 配置环境变量
在生产环境和开发环境的时候,有些变量是不一样的,比如接口,打包的时候就需要切换,
所以配置下环境变量,通过不同命令行切换不同环境api等信息
(1)先在package.json文件中添加:
" qa " : " vue - cli - service build -- mode qa "
"scripts": { "dev": "vue-cli-service serve --mode dev", "build": "vue-cli-service build --mode prd", "qa": "vue-cli-service build --mode qa" },
(2)在项目目录下建立 .env.dev文件和.env.prd文件和.env.qa文件
.env.dev文件
NODE_ENV = development
VUE_APP_BASIC_API = dev
env.prd文件
NODE_ENV = production
VUE_APP_BASIC_API = prd
.env.qa文件
NODE_ENV = production
VUE_APP_BASIC_API = qa
然后在src目录下新建文件夹utils ----》建文件config.js
config.js文件
let BackUrl = null; let BasiUrl = process.env.VUE_APP_BASIC_API if(BasiUrl === 'dev') {
BackUrl = 'dev url'
}else if(BasiUrl === 'qa') { BackUrl = 'qa url' }else if(BasiUrl === 'prd') {
BackUrl = 'prd url'
} export default BackUrl
在config.js文件里更改为正确的生产和测试环境即可
安装下 http-server 模块 :
npm i http-server -g
发测试的话 用 npm run qa 打包
(如果打包后自己要测试,打开dist文件夹,执行http-server即可)