日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 前端技术 > vue >内容正文

vue

Vue通过build打包后 打开index.html页面是空白的

發(fā)布時(shí)間:2023/12/10 vue 37 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Vue通过build打包后 打开index.html页面是空白的 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

最近在build打包vue項(xiàng)目遇到了幾個(gè)問(wèn)題,如下:

1、npm run build打包項(xiàng)目之后,我們通常是把dist文件里面被壓縮后的static文件跟index.html提交到服務(wù)器,但最近發(fā)現(xiàn)直接打開(kāi)index.html頁(yè)面是空白的,還會(huì)報(bào)幾個(gè)錯(cuò),找不到頁(yè)面路徑。

原因:找到config文件下index.js,全局搜索assetsPublicPath,結(jié)果是?assetsPublicPath:' / ' 默認(rèn)為根目錄,而index.html和static是在同一級(jí)目錄下,因此,解決方法就是?assetsPublicPath:' ./ ' 斜杠前加一個(gè)點(diǎn),表示同一級(jí)。如圖:

?

?

如果還搞不懂a(chǎn)ssetsPublicPath,看下面解釋:

assetsPublicPath

這個(gè)靜態(tài)資源的引用前綴, 默認(rèn)的是/

按照上面的配置,
當(dāng)你把 dist 文件夾下的文件放到服務(wù)器,

  • 能用http://www.xxx.com/static/js/xxx.js路徑訪問(wèn)到時(shí), 那么assetsPublicPath就不需要修改了
  • 需要用http://www.xxx.com/aaa/bbb/static/js/xxx.js路徑訪問(wèn)到時(shí), 那么assetsPublicPath就得改成/aaa/bbb/, 然后重新 build 一次, 上傳到服務(wù)器
  • 當(dāng)你把靜態(tài)文件傳到 cdn, 需要用http://stacic.yyy.com/aaa/bbb/static/js/xxx.js路徑訪問(wèn)到時(shí), 那么assetsPublicPath就得改成http://stacic.yyy.com/aaa/bbb/, 然后重新 build 一次, 上傳到服務(wù)器

用絕對(duì)路徑聽(tīng)起來(lái)好像很復(fù)雜啊, 能不能用相對(duì)路徑呢?
當(dāng)然也是可以的, 不過(guò)配置起來(lái)要比用絕對(duì)路徑復(fù)雜的多, 主要是涉及到 css 文件的里圖片和字體等

  • 首先,?assetsSubDirectory要設(shè)置成空
  • 將assetsPublicPath, 改成./

  • ?

    2、頁(yè)面可以正常打開(kāi)了,但是vue-router跳轉(zhuǎn)路由頁(yè)面無(wú)法顯示,其實(shí),這個(gè)也很簡(jiǎn)單。

    解決方法:打開(kāi)index.js看路由配置,mode:' hash ' 改這個(gè)配置即可,如圖:

    ?



    轉(zhuǎn)載于:https://www.cnblogs.com/xtjatswc/p/10306567.html

    總結(jié)

    以上是生活随笔為你收集整理的Vue通过build打包后 打开index.html页面是空白的的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。

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