vue-cli專案打包多個與static檔案同級的靜態資源目錄（copy-webpack-plugin外掛的使用）

BothEyes1993發表於2018-12-14
VueWebPlugin

場景

業務要求能夠直接通過 “域名+/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即可。

來源：https://juejin.im/post/5c139b28f265da6147701aec

相關文章