vue打包后生成可配置文件(基于vue-cli3.0)

vue打包发布后，如果接口地址发生变更，需重新打包，过于繁琐。因此需要将一些例如接口地址、网站参数等动态配置。

具体步骤如下：

1. 安装generate-asset-webpack-plugin插件

npm install generate-asset-webpack-plugin --save-dev

2. 在vue.config.js中配置如下

const GenerateAssetPlugin = require('generate-asset-webpack-plugin')

const createServerConfig = compilation => {
  let serverConfig = {
    BASE_URL: '' // 打包后生成的文件内容，接口地址
  }
  return JSON.stringify(serverConfig)
}

module.exports = {
  configureWebpack: {
    plugins: [
      new GenerateAssetPlugin({
        filename: 'server-config.json',
        fn: (compilation, cb) => {
          cb(null, createServerConfig(compilation))
        },
        extraFiles: []
      })
    ]
  }
}

3. 在接口配置封装文件（我的是request.js）根据项目实际情况而定

import axios from 'axios'

const setAxiosBaseUrl = async () => {
  const res = await axios.get('server-config.json')
  const { BASE_URL } = res.data
  service.defaults.baseURL = BASE_URL || ''// 这里的service为自己二次封装的请求，根据项目实际情况修改
}
if (process.env.NODE_ENV === 'production') { // 判断是否为生产环境
setAxiosBaseUrl()
}

4、打包后dist下生成server-config.json文件，修改接口后生效

{"BASE_URL":"http://192.168.0.1:8080"}