网站建设后应该干什么,图片外链在线生成,电脑系统7怎么打开wordpress,算命网站怎么做近期#xff0c;有一个项目#xff0c;运维在部署的时候#xff0c;接口ip还没有确定#xff0c;而且ip后面的路径一直有变动#xff0c;导致我这里一天打包至少四五次才行#xff0c;很麻烦#xff0c;然后看了下有没有打包后修改配置文件修改接口ip的方法#xff0c;… 近期有一个项目运维在部署的时候接口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_ENVtest
VUE_APP_publicPath/eseal/policyVUE_APP_ServeUrlx
VUE_APP_FileUrlx
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
} 修改配置之后刷新一下页面即可获取最新的数据
