域名一般是打包到项目里面的,打包后不能动态配置,只能通过不同的指令来动态切换域名。
后台说增加一个配置文件,动态更改域名。查了查网上,现记录下步骤。
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了