vue-cli4.0 多環境配置

網上找了很多 vue-cli 多環境配置的文章，發現跟自己項目里許多地方對不上，於是自己研究了下，至少能用

 

1. /src 目錄下新建 api 目錄，api 目錄下新建 index.js。

/src/api/index.js

const api = {}

switch (process.env.NODE_ENV) {
    // 生產環境
    case 'production':
        api.base_url = 'http://www.test.test'
        break
    // 開發環境
    case 'development':
        api.base_url = 'http://www.api.test'
        break
    default:
}

export default api

 

2. 配置 /src/main.js，VUE 頁面是使用 this.$api.base_url 就可以使用當前環境配置的 api 地址了

// 引入 api 配置文件
import api from "./api/index.js";

// 掛在 api 到 VUE 對象上，在 VUE 對象中使用 this.$api.base_url
Vue.prototype.$api = api;

 

3. 添加新環境

/config/dev.env.js 復制一份 /config/test1.env.js，內容不需要修改，文件名中 test1 可以自己想命名的環境名字

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"test1"'
})

 

/build/webpack.dev.conf.js 復制一份 /build/webpack.test1.conf.js，文件名中 test1 可以自己想命名的環境名字，需要修改文件 49行左右的環境名

 'process.env': require('../config/test1.env') 

 

/src/api/index.js 添加新 API 地址

// 測試環境1
case 'test1':
    api.base_url = 'http://www.tes1.test'
    break

 

/package.json 添加新指令，就可以在命令行里 使用 npm run test1 啟動項目了，要添加多個以此類推

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "test1": "webpack-dev-server --inline --progress --config build/webpack.test1.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

 

完整代碼可以參考：https://git.lug.ustc.edu.cn/gechenpeng/axiostest.git