vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）

场景

业务要求可以直接经过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中很差看又不能直接将html放在static中。因此想到了既然static能够直接访问，那么给他新加几个文件目录应该不是问题。

重点

在webpack.dev.conf.js和webpack.prod.conf.js两个文件中，都有这样一段配置代码：

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
// 做用：将static目录拷贝到打包以后的dist文件下
复制代码

下面就简单了，照葫芦画瓢，配置好你要拷贝的文件目录便可：

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../file1'),
        to: 'file1',
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../file2'),
        to: 'file2',
        ignore: ['.*']
      }
    ])
复制代码

项目目录只需在与static的同级目录新建对应的file1,file2便可，里面能够听任何你想放的东西，且访问时只需使用绝对路径便可

既然这样可行，那么将经过这种方式将静态站点融入到vue项目中也是可行的，当你一个站点上有不少静态页面时，或者是成品非vue项目代码，只须要经过这种方式便可合并到vue项目中，且只须要在url上加上你定义的file便可。