前言

项目开发中正式上线前一般都会经历几次不同版本的测试，如test测试环境和uat预发布环境，不同环境可能许多配置项都有不同，如果是靠改代码实现不仅麻烦而且很容易出错。

文件准备

在src同级新建文件夹dispose，里面新建文件config.js，文件夹和文件名称可以自定义，名称自己喜欢就好！

内容如下图这里以API_ROOT为例，需要配置其他的自己加上就好，NODE_ENV为环境名称，无强制要求，自己能区分开就好。

const config = {
  NODE_ENV: 'development',
  API_ROOT: 'http://test.com'
}

webpack配置

在config文件夹中的index.js文件中加入如下配置

build的节点也不要忘记，要不然打包部署之后会不生效

assetsSubDirectory2: 'dispose',

dispose就是刚才新建的文件夹，这里的配置是为了在打包之后输出我们的配置文件夹，我修改了打包输出文件夹名称为erp，这里不用管

然后需要配置build文件夹中的webpack.dev.conf.js和webpack.prod.conf.js 在new CopyWebpackPlugin里面新增一项

    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*'],
      },
      {
        from: path.resolve(__dirname, '../dispose'),
        to: config.dev.assetsSubDirectory2,
        ignore: ['.*'],
      },
    ]),

这里配置是指定这个文件不被webpack打包的时候编译，因为webpack打包编译后文件名称就会变了，影响后面的使用

引入使用

在项目根目录的index.html文件中引入配置的文件

标签引入即可

如在axios中使用，直接config.API_ROOT即可，需要其他灵活配置的地方自己加即可

打包结果

此时打包后输出文件就会多一个dispose文件夹，里面包含有config.js文件，修改环境名称和具体配置项直接和打包一起输出的文件文件夹放到文件夹中即可，需要多环境发布的直接改里面的配置项即可这里需要注意，每次打包后都会生成新的配置文件，发布一次之后不用频繁发布这个文件，服务器上的文件建议单独维护，需要加配置的本地加上后服务器上的文件同步加上即可

vue项目打包多环境配置（一次打包多环境部署）

前言

文件准备

webpack配置

引入使用

打包结果