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