在生產環境和開發環境的時候,有些變量是不同的,好比接口,打包的時候就須要切換,vue
因此配置下環境變量,經過不一樣命令行切換不一樣環境api等信息vue-cli
(1)先在package.json文件中添加:npm
"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') {
}else if(BasiUrl === 'qa') { BackUrl = 'qa url' }else if(BasiUrl === 'prd') {
} export default BackUrl
在config.js文件裏更改成正確的生產和測試環境便可命令行
安裝下 http-server 模塊 :
npm i http-server -g
發測試的話 用 npm run qa 打包
(若是打包後本身要測試,打開dist文件夾,執行http-server便可)