我们在vue项目实际开发的过程中会有很多公共的配置，比如一些第三方服务的接口、图片服务器地址、cdn地址等等，一般情况下不同的环境会有不同的配置信息。
常规的方法是在pubilc目录下新增config.js，然后在index.html中引入，这样也方便打包部署后，运维根据需求直接修改config.js中的某些地址，而不用重复打包部署。
就像这样：
config.js
index.html
我在近期的项目中新增了一些额外的文件（比如xxx.html,config.js,xxx.txt等），需要根据不同环境打包时放到根目录下。最初肯定是每次打包前我自己手动修改,
最近闲下来就想去自动化生成这些静态资源，于是找到了这个generate-asset-webpack-plugin插件。下边我以自动化生成config.js为例，大致说一下这个插件的用法。
老样子，废话都在外边，有用的话都在注释里，哈哈哈
const path = require('path')const GenerateAssetPlugin = require('generate-asset-webpack-plugin')const fs = require('fs')module.exports = {configureWebpack: {plugins: process.env.NODE_ENV === 'production' ? [ // 生产环境配置new GenerateAssetPlugin({filename: 'config.js', // 定义生成的文件名fn: (compilation, cb) => {/*** 这个compilation参数我没查什么意思，有兴趣可以了解一下* cb的第二个参数就是要生成的文件内容，字符串格式*/cb(null, fs.readFileSync(path.resolve(__dirname, 'build/buildExtraFiles/production/config.js')));},/*** 额外生成的文件路径，比如'icon.png','./build/buildExtraFiles/production/config.js'* 可以看一下源码，也是用fs直接读的文件，需要注意的是，这个操作会直接在你打包生成的文件夹下生成完整的目录结构* 比如我们传的是'./build/buildExtraFiles/production/config.js'，你打包后的文件名是dist，那么你的dist下就是这样的* dist* .....* -build*-buildExtraFiles* -production* config.js*/extraFiles: []})] : [ // 开发环境配置new GenerateAssetPlugin({filename: 'config.js',fn: (compilation, cb) => {cb(null, fs.readFileSync(path.resolve(__dirname, 'build/buildExtraFiles/development/config.js')));},extraFiles: []})]},};
我有话说
由于我实际项目中额外的文件比较多，所以选择了这种形式，在build文件下搞了一块区域管理这些东西，大概这样
其实如果你只有一些url的配置，duck不必用到fs模块
如果你的项目url万年不变，duck不必外放这些配置信息，直接配置到.env.xxx里边,然后根据不同环境打包就好了
