学前端：vuecli4 配置项目自动根据开发或生产环境切换接口地址

大体流程

cli4的打包入口文件是vue.config.js(没有则自己创建),在打包的时候我们可以根据具体环境（process.env.NODE_ENV）生成包含接口地址的文件

所以，只要两步就OK。

• 1.在vue.config.js执行时，创建接口地址文件
• 2.在需要读取接口地址的文件，导入1生成的文件

代码

-----------
// 为了方便阅读，我全部写在vue.config.js文件内
(function (isProduction){
    // 区分环境
    let isDev = !isProduction
    const fs = require('fs')
    const path = require('path')
    const mockBaseURL = '开发使用的接口'
    const realBaseURL = '上线使用的接口'

    // 根据环境区分接口地址，拼接代码文件内容
    let FileStr=
    `    module.exports = {
        baseURL : '${isDev?mockBaseURL:realBaseURL}'
    }`
    // 生成最终代码文件（目录自己指定，之后的接口地址都从该文件导入）
    fs.writeFileSync(path.join(__dirname,'./src/helper/config-baseURL.js'),FileStr)
})(process.env.NODE_ENV === 'production')

module.exports = {
// webpack配置项
  }
  
-----------
// 使用（以axios为例）
import {baseURL} from './config-baseURL'
import axios from 'axios'
axios.defaults.baseURL = baseURL