webpack + vue 打包生成公共配置文件（域名） 方便動態修改

需求原因

 原來的項目中域名是打包到項目里面的，打包后不能動態配置，只能通過不同的指令打包來切換域名，每天都在測試域名和正式域名來回摩擦，后台大佬說你們可以生成一個配置文件這樣就不用頻繁打包了直接修改配置文件就好，於是就有了這篇文章。

 

第一步 安裝插件      

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

 

第二步 新建配置文件

在項目的根目錄下新建 serverConfig.json 以后會根據這個文件去生成打包的配置文件

{"ProdUrl":"http://text.com"}

 

第三步 引入generate-asset-webpack-plugin

在build/webpack.prod.conf.js中添加

 

 const GenerateAssetPlugin = require('generate-asset-webpack-plugin');

const serverConfig = require('../serverConfig.json')；//引入根目錄下的配置文件


const createJson = function() {
  return JSON.stringify(serverConfig);
};

//plugins 中使用
  plugins: [
    //打包時生成一個配置文件
    new GenerateAssetPlugin({
      filename: 'serverConfig.json',
      fn: (compilation, cb) => {
          cb(null, createJson());
      },
  }),
]

 

 

第四步 使用配置文件中的內容

這里根據不同項目不同需求代碼自行變換，我分享一下我的項目里的使用。在main.js 中vue實例初始化之前將baseURL存到本地

 

axios.get('serverConfig.json').then( e => {
  let baseURL = e.data.ProdUrl
  localStorage.setItem("baseURL", baseURL);
  new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
  })
})

 

由於是使用axios獲取，是異步方法，根據情況進行處理。、

好了接下來就再也不用為了域名每天build了

 

打包后的目錄