vue动态获取接口域名
vue动态获取接口域名
·
域名一般是打包到项目里面的,打包后不能动态配置,只能通过不同的指令来动态切换域名。
后台说增加一个配置文件,动态更改域名。查了查网上,现记录下步骤。
1、安装插件
npm install --save-dev generate-asset-webpack-plugin
2、新建配置文件(我是将配置文件放置在public文件夹内)
在项目的public目录下新建 serverconfig.json 以后会根据这个文件去生成打包的配置文件
{"produrl":"http:www.baidu.com"}
3、第三步 引入generate-asset-webpack-plugin
在build/webpack.prod.conf.js中添加
const generateassetplugin = require('generate-asset-webpack-plugin');
const serverconfig = require('../public/serverconfig.json');//引入根目录下的配置文件
const createjson = function() {
return JSON.stringify(serverconfig);
};
//plugins 中使用
plugins: [
//打包时生成一个配置文件
new generateassetplugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createjson());
},
}),
]
4、第四步 使用配置文件中的内容
这里根据不同项目不同需求代码自行变换,我分享一下我的项目里的使用。在main.js 中vue实例初始化之前将baseurl存到本地
axios.get('./serverconfig.json').then( e => {
let baseurl = e.data.produrl
window.localStorage.setItem("baseurl", baseurl);
new vue({
el: '#app',
router,
render: h => h(app)
})
})
打包后的目录
上传到服务器就好了。接下来就可以不用再重新build了
更多推荐
已为社区贡献4条内容
所有评论(0)