近期，有一个项目，运维在部署的时候，接口ip还没有确定，而且ip后面的路径一直有变动，导致我这里一天打包至少四五次才行，很麻烦，然后看了下有没有打包后修改配置文件修改接口ip的方法，对比了下，使用以下方法
前提：vue2
方案一：
在public文件夹新建config.js文件
#config.js
window.config= {ServeUrl:"xx",FileUrl:"xx",
}main.js 中配置
axios.defaults.baseURL = window.config.ServeUrl;因为此方案灵活性不好，没有测试使用
方案二（我使用的）：
下载generate-asset-webpack-plugin插件
本地的配置文件模板config.js（根目录创建）
module.exports = {ServeUrl:"xxx",
}vue.config.js配置：
const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const configs = require('./config') //引用本地的配置文件// 导出配置文件的内容
var createServerConfig = function(compilation) {return JSON.stringify(Object.assign({_hash: compilation.hash,},configs))
}
module.exports = {publicPath: process.env.VUE_APP_publicPath, lintOnSave: false,productionSourceMap: false, //打包不生成map// devServer: {// open: true,// proxy: 'http://localhost:8080'// }chainWebpack(config) {config.plugin('html').tap((args) => {args[0].title = process.env.VUE_APP_Titlereturn args})// 打包生成配置文件config.plugin('GenerateAssetPlugin').use('generate-asset-webpack-plugin', [{filename: 'config.json',//生成的文件fn: (compilation, cb) => {cb(null, createServerConfig(compilation))},extraFiles: [],},])}
}
本地不同环境打包使用的配置环境
具体设置看vue .env配置环境变量-CSDN博客
NODE_ENV='test'
VUE_APP_publicPath='/eseal/policy'VUE_APP_ServeUrl="x"
VUE_APP_FileUrl="x"package.json配置
为了本地环境和线上环境做区分，需要修改默认启动配置
"serve": "vue-cli-service serve --mode test",main.js配置
if(process.env.NODE_ENV !== 'test'){ //前提是本地运行环境是testaxios({method: 'get',url: process.env.VUE_APP_publicPath+'/config.json', //文件存放地址}).then(res=>{console.log('读取配置',res);axios.defaults.baseURL = res.data.ServeUrl;Vue.prototype.$ServeUr = res.data.ServeUrVue.prototype.$FileUrl = res.data.FileUrl})
}else{
axios.defaults.baseURL= process.env.VUE_APP_ServeUrl
Vue.prototype.$ServeUr = process.env.VUE_APP_ServeUr
Vue.prototype.$FileUrl = process.env.VUE_APP_FileUrl
}axios.js 接口请求文件配置
因为使用全局变量的this获取不到数据，引入vue也不行，就多写了一次，根据不同需求，这个也可以不写的
if(process.env.NODE_ENV !== 'test'){axios({method: 'get',url: process.env.VUE_APP_publicPath+'/config.json',}).then(res=>{console.log('读取配置',res);axios.defaults.baseURL = res.data.ServeUrl;})
}else{
axios.defaults.baseURL= process.env.VUE_APP_ServeUrl
}修改配置之后，刷新一下页面即可获取最新的数据
