場(chǎng)景

業(yè)務(wù)要求能夠直接通過(guò) “域名+/file”的方式訪問(wèn)靜態(tài)資源的html，然而產(chǎn)品絕對(duì)static暴露在url中不好看又不能直接將html放在static中。所以想到了既然static可以直接訪問(wèn)，那么給他新加幾個(gè)文件目錄應(yīng)該不是問(wèn)題。

重點(diǎn)

在webpack.dev.conf.js和webpack.prod.conf.js兩個(gè)文件中，都有這樣一段配置代碼：

// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}]) // 作用：將static目錄拷貝到打包之后的dist文件下 復(fù)制代碼

下面就簡(jiǎn)單了，照葫蘆畫瓢，配置好你要拷貝的文件目錄即可：

// copy custom static assetsnew 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: ['.*']}]) 復(fù)制代碼

項(xiàng)目目錄只需在與static的同級(jí)目錄新建對(duì)應(yīng)的file1,file2即可，里面可以放任何你想放的東西，且訪問(wèn)時(shí)只需使用絕對(duì)路徑即可

既然這樣可行，那么將通過(guò)這種方式將靜態(tài)站點(diǎn)融入到vue項(xiàng)目中也是可行的，當(dāng)你一個(gè)站點(diǎn)上有很多靜態(tài)頁(yè)面時(shí)，或者是成品非vue項(xiàng)目代碼，只需要通過(guò)這種方式即可合并到vue項(xiàng)目中，且只需要在url上加上你定義的file即可。

轉(zhuǎn)載于:https://juejin.im/post/5c139b28f265da6147701aec

總結(jié)

以上是生活随笔為你收集整理的vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。