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

旧城等待， 2023-07-25 14:12 20阅读 0赞

#### 需求: ####

原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好.

## 1.安装插件 ##

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

## 2.新建配置文件 ##

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

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

## 3.引入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());
    	      },
    	  }),
    	]

## 4.使用配置文件中的内容 ##

#### 这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用。在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了 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]: /images/20230528/5eaa16e41be2480d83636e0327d15e77.png