vue 打包之后生成一个配置文件修改接口域名
第一步:安装 generate-asset-webpack-plugin 插件:npm install --save-dev generate-asset-webpack-plugin第二步:配置 webpack.prod.conf.js 文件:// 让打包的时候输出可配置的文件let GenerateAssetPlugin = require('generate-asset-webp...
·
方法一:
第一步:安装 generate-asset-webpack-plugin 插件:
npm install --save-dev generate-asset-webpack-plugin
第二步:配置 webpack.prod.conf.js 文件:
// 让打包的时候输出可配置的文件
let GenerateAssetPlugin = require('generate-asset-webpack-plugin');
let createServerConfig = function(params){
let oApi = {
baseURL: "https://198.168.0.108:8080"
};
return JSON.stringify(oApi);
}
// 让打包的时候输入可配置的文件
// 这段代码加在 plugins:[] 中
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
第三步:输入 npm run build 打包代码,结果如下:
第四步:获取 baseURL:
// 在 main.js 中定义一个全局函数
Vue.prototype.getConfigJson=function(){
this.$http.get("serverconfig.json").then((result)=>{
// 用一个全局字段保存 baseURL 也可以用 sessionStorage 存储
Vue.prototype.baseURL = result.body.baseURL;
}).catch((error)=>{console.log(error)});
}
第五步:使用 baseURL:
// 在 app.vue 里面 执行 this.getConfigJson();
mounted() {
this.getConfigJson();
}
// 在需要用到的地方直接用 this.baseURL,因为 baseURL 已经是全局了
let url = this.baseURL + '/api/...
方法二:
第一步:在 static 静态文件中新建一个 config.js 文件,js 代码如下:
window.global_config = {
BASE_URL: "http://192.168.0.137:90"
};
第二步:在 index.html 中引入 static 文件夹下的 config.js 文件
<script src="./static/config/index.js"></script>
第三步:在需要的地方使用:
// 在需要用到的地方直接用 window.global_config.BASE_URL
let url = window.global_config.BASE_URL + '/api/…
更多推荐
已为社区贡献13条内容
所有评论(0)