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即可。