一聚教程網︰一個值得你收藏的教程網站

最新下載

秒速赛车-秒速赛车官方网站「秒速赛车开奖查询」-「平安彩票网」

時間︰2019-04-19 17:25:06 編輯︰豬哥 來源︰轉載

當Vue項目完成後,在根目錄下打開命令行,輸入命令︰

npm run build

實際上此命令就是執行build.js文件,將項目打包成靜態資源。

此命令完成後,項目根目錄下會多出一個dist文件夾,dist文件里面有︰

static文件下包括項目打包後的css、js、img、fonts(字體圖標)。

項目資源無法加載

點擊index.html,瀏覽器顯示該頁面是空白的。打開控制台看到index.html文件中沒有加載任何css、js文件。

解決方法︰

打開項目根目錄config下的index.js文件,進行如下修改︰

將 assetsPublicPath: ‘/‘ ,改為 assetsPublicPath: ‘./‘ ,

保存後重新 npm run build ,在新生成的dist目錄下點開index.html,這時頁面結構正常顯示出來了,但是頁面字體圖標和mock的數據無法正常加載。

字體圖標無法加載

頁面中用background加載的圖片可以正常顯示,但是所有的字體圖標都不能正常顯示,解決方法︰打開根目錄下build中的 utils.js 文件,在控制build樣式文件代碼中添加 publicPath: ‘../../‘ ,如下︰

保存後,依舊重新'npm run build',打開dist目錄下的index.js可以看到字體圖標正常顯示了。

這里為什麼需要這樣修改,可以參考 #... 。

Mock數據無法正常加載(我的做法是把模擬的json數據放到cdn上,跳過這一步)

此項目的絕大部分頁面內容是通過在跟目錄下創建的data.json文件渲染到頁面上的,是模擬從後端請求數據的,開發調試時用'npm run dev'命令,會借助node啟動一個本地服務器,可以正常的渲染出相應的數據。而通過打包後的項目時屬于靜態資源的,點擊index.html查看項目,是無法加載mock的數據的,瀏覽器也會報跨域的錯誤。若想正常的加載mock數據,最好的方式是講打包後的資源丟到服務器中,或者使用jsonp請求線上真實數據,因為它的原理是利用script標簽來獲得數據,在github上是可以預覽到的。

如何在github上預覽網頁效果︰

settings—github pages—選擇“master branch”和“save”—刷新—再次找到“github pages”復制底下的鏈接—返回點擊倉庫名—點擊edit—粘貼到框框內,一定要記住添加文件名及其後綴比如index.html—save.別人就可以通過這個鏈接訪問你的網頁。

文章評論

熱門欄目