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

后台说增加一个配置文件,动态更改域名。查了查网上,现记录下步骤。
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了 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐