欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli4如何打包靜態(tài)資源到指定目錄

 更新時(shí)間:2022年09月01日 09:35:34   作者:Amorleon  
這篇文章主要介紹了vue-cli4打包靜態(tài)資源到指定目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

打包靜態(tài)資源到指定目錄

在最近開發(fā)工作中,我打包的 dist 文件夾下,vue-cli4 打包(npm run build)的靜態(tài)資源全部都平鋪展開在該文件夾下,看著很別扭,于是想打包到 static 文件夾下。

 vue-cli4 執(zhí)行打包命令時(shí),默認(rèn)打包的位置是dist文件夾下,不會(huì)自動(dòng)打包為一個(gè)模塊(文件夾)。

解決

在 vue.config.js 文件中設(shè)置 assetsDir 指定打包的目錄為根目錄下的 static 文件夾,就會(huì)在 dist 文件夾下自動(dòng)生成一個(gè)新的文件夾 static 來(lái)存放打包的靜態(tài)資源。

設(shè)置之后打包的文件目錄為:

說(shuō)明:文件夾下的 js 和 json 文件夾是我寫在 public 文件夾下的模塊用于 axios 請(qǐng)求本地?cái)?shù)據(jù),打包時(shí)會(huì)直接打包到 dist 文件夾下。 

vue-cli打包訪問(wèn)靜態(tài)資源404

使用vue-cli生產(chǎn)打包,把代碼放到服務(wù)器上訪問(wèn)的時(shí)候,不少同學(xué)會(huì)看到頁(yè)面一片空白,打開控制臺(tái),會(huì)發(fā)現(xiàn)是某些資源文件找不到,如圖:

其實(shí)這里是因?yàn)関ue-cli的webpack打包配置靜態(tài)文件訪問(wèn)路徑不對(duì),配置文件路徑如圖:

在這個(gè)文件下面找到生產(chǎn)(build)配置:

要解決靜態(tài)文件訪問(wèn)路徑問(wèn)題只需要修改配置中的assetsPublicPath字段即可。

如果你的服務(wù)器靜態(tài)文件路徑是這樣的:

將路徑寫成這樣即可訪問(wèn)靜態(tài)資源:

資源訪問(wèn)成功狀態(tài):

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論