700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue动态获取接口域名

vue动态获取接口域名

时间:2020-08-02 23:37:14

相关推荐

vue动态获取接口域名

域名一般是打包到项目里面的,打包后不能动态配置,只能通过不同的指令来动态切换域名。

后台说增加一个配置文件,动态更改域名。查了查网上,现记录下步骤。

1、安装插件

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

2、新建配置文件(我是将配置文件放置在public文件夹内)

在项目的public目录下新建 serverconfig.json 以后会根据这个文件去生成打包的配置文件

{"produrl":"http:"}

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.produrlwindow.localStorage.setItem("baseurl", baseurl);new vue({el: '#app',router,render: h => h(app)})})

打包后的目录

上传到服务器就好了。接下来就可以不用再重新build了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。