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