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