vue-element-admin 项目中的url打包到外部可修改

vue-element-admin

PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板，可以方便地实现后台管理系统的快速搭建和定制，同时支持多种数据源和插件扩展。

项目地址：https://gitcode.com/gh_mirrors/vu/vue-element-admin

免费下载资源

werch

384人浏览 · 2022-06-16 17:49:27

werch · 2022-06-16 17:49:27 发布

1.引入webpack 插件

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

2.在vue.config.js 中引入插件


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

3.createServerConfig 中存放要打包隔离的文件

var createServerConfig = function(compilation){
let cfgJson={ApiUrl:"http://www.adoctors.cn"};
return JSON.stringify(cfgJson);
}

4.vue.config.js中configurewebpack对象下引入generate-asset-webpack-plugin插件，此时build:prod 已经能看到serverconfig.json 文件

plugins:[new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})]

5.在项目入口处获取json文件的内容，并存入全局，（sessionStorage）,接口的beseurl 获取相应需要的地址即可

Vue.prototype.getConfigJson=function(){
this.$http.get("serverconfig.json").then((result)=>{
//用一个全局字段保存ApiUrl 也可以用sessionStorage存储
Vue.prototype.ApiUrl=result.body.ApiUrl;
}).catch((error)=>{console.log(error)});
}