vue-cli3.0 配置环境变量

时间 2019-11-11

标签 vue cli3.0 cli 配置环境变量繁體版

原文原文链接

在生产环境和开发环境的时候，有些变量是不同的，好比接口，打包的时候就须要切换，vue

因此配置下环境变量，经过不一样命令行切换不一样环境api等信息vue-cli

（1）先在package.json文件中添加：npm

" 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文件json

.env.dev文件api

NODE_ENV = development
VUE_APP_BASIC_API = dev

env.prd文件测试

NODE_ENV = production
VUE_APP_BASIC_API = prd

.env.qa文件ui

NODE_ENV = production
VUE_APP_BASIC_API = qa

而后在src目录下新建文件夹utils ----》建文件config.jsurl

config.js文件spa

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便可）