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

要实现“webpack + vue 打包生成公共配置文件（域名） 方便动态修改”，可以参照以下步骤：

1. 创建配置文件
   在项目根目录下创建一个config.js文件，用于存放公共配置信息，例如域名、API地址等。在文件中定义一个对象，包含需要的配置信息。示例代码如下：

   ```javascript
   // config.js

   module.exports = {
   domain: 'https://www.example.com',
   api: 'https://api.example.com'
   }
   ```

2. 在webpack配置中引用配置文件
   在webpack配置文件中使用require或import引入config.js文件，获取其中的配置信息。示例代码如下：

   ```javascript
   // webpack.config.js

   const webpack = require('webpack');
   const Config = require('./config.js');

   module.exports = {
   // ...
   plugins: [
   new webpack.DefinePlugin({
   'process.env': {
   DOMAIN: JSON.stringify(Config.domain),
   API: JSON.stringify(Config.api)
   }
   })
   ]
   }
   ```

3. 在vue项目中使用配置信息
   在vue组件中可以使用process.env.DOMAIN和process.env.API获取配置信息。示例代码如下：

   ```javascript
   // HelloWorld.vue

   
   ```

4. 动态修改配置信息
   在应用中需要动态修改配置信息时，只需在服务器端修改config.js文件，然后重新打包应用即可。如果需要运行时修改配置信息，可以使用服务端渲染（SSR）或者浏览器端通过接口获取配置信息的方式。

示例1：在Nuxt.js项目中实现动态修改配置信息
1. 在Nuxt.js项目中，可以在服务器端读取config.js的内容，并将其传递给客户端。例如在nuxt.config.js中加入以下代码：

```javascript
// nuxt.config.js

const Config = require('./config.js');

export default {
  // ...
  plugins: [
    { src: '~/plugins/config.js', ssr: false, injectAs: 'config' }
  ],
  render: {
    // 向客户端输出config信息
    bundleRenderer: {
      runInNewContext: false,
      shouldPreload: () => false,
      shouldPrefetch: () => false,
      inject: false
    }
  },
  // ...
  generate: {
    // 将config信息写入静态文件
    async routes () {
      return [
        {
          route: '/',
          payload: {
            config: Config
          }
        }
      ]
    }
  }
}
```

1. 在plugins目录下创建config.js文件，用于从服务器端传递config信息给客户端。示例代码如下：

   ```javascript
   // plugins/config.js

   import Vue from 'vue'
   import Config from '~/config.js'

   if (!Vue.prototype.$config) {
   Vue.prototype.$config = Config
   }
   ```

2. 在客户端可以通过$config来获取config信息。示例代码如下：

   ```javascript
   // HelloWorld.vue

   
   ```

3. 在服务器端修改config.js文件后，需要重新打包并重新启动Nuxt.js应用。

示例2：在React项目中实现动态修改配置信息
1. 在React项目中，可以使用fetch或axios等库从服务器端获取config信息，并将其存储在组件的state中。示例代码如下：

```javascript
// App.jsx

import React, { Component } from 'react'
import axios from 'axios'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      domain: '',
      api: ''
    }
  }

  componentDidMount () {
    axios.get('/config.json').then(response => {
      this.setState({
        domain: response.data.domain,
        api: response.data.api
      })
    })
  }

  render () {
    return (
      <div>
        <h1>Hello World!</h1>
        <p>Domain: {this.state.domain}</p>
        <p>API: {this.state.api}</p>
      </div>
    )
  }
}
```

1. 在服务器端修改config.js文件后，需要重新生成静态配置文件，例如使用webpack构建时可以在webpack.config.js中添加以下代码：

   ```javascript
   // webpack.config.js

   const fs = require('fs')
   const Config = require('./config.js')

   fs.writeFileSync('config.json', JSON.stringify(Config))
   ```

2. 重新构建React应用即可生效。