vuecli2 和 vuecli3 打包本地線上預覽問題解決

參考博客111

問題一: 寫好的vue項目上傳到GitHub中,但是預覽的時候卻是一片空白;
或者問題二: 打開 dist 文件下的 index.html 頁面空白。

1, vuecli2 打包本地線上預覽 解決

1-1,找到config>index.js文件,打開這個文件,找到build(注意是build不是dev)這個對象下面的assetsPublicPath的值改成 ‘./’

在這裏插入圖片描述
此外,還有另外一個方法可以解決這個問題,就是在項目文件夾下找到build>webpack.prod.conf.js,打開該文件夾,找到output對象,然後添加一行代碼 publicPath: ‘./’,同樣可以起到效果。

在這裏插入圖片描述

1-2,項目中背景圖片的路徑問題–無法加載

如果你的項目文件中的css代碼以類似這樣的方式引入背景圖片:background-image: url(…/assets/main-view/icons/seafood.png),
這時項目打包後,打開index.html文件可能會無法顯示該背景圖片,
這其實也是圖片路徑的問題,這時你需要在項目文件中找到build>utils.js文件,然後打開該文件,
在generateLoaders( )這個函數下面添加一行代碼 publicPath: ‘…/…/’ 即可解決背景圖片無法顯示的問題。
再重新npm run build,成功後再打開 dist 下面的 index.html 就可以預覽了,但是圖片還是不能無法加載。。。

打開根目錄下 build 中的 utils.js 文件,在控制build樣式文件代碼中添加 publicPath: ‘…/…/’,

在這裏插入圖片描述

現在打開 dist 文件下的 index.html 頁面就可以正常預覽了

2, vuecli3 打包本地線上預覽 解決

npm run build 打包之後
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章