關於vue-cli構建的項目在github上的預覽問題

本文首發於yoowin.me，歡迎訪問！

vue-cli構建的項目，npm run dev時看到的頁面對應的是npm run build以後dist文件夾中的index.html文件，而不是項目根目錄下的index.html文件。

我第一次使用vue-cli構建的項目，在npm run build以後，在本地打開dist文件夾中的index.html文件，頁面是空白的。而在本地npm run dev是徹底沒有問題的。更令我鬱悶的是push到github上面時，dist文件都沒了。

兩個問題

一番摸索以後，終於找到了問題緣由，咱們逐一分析這兩個問題。

忽略文件

對比github上和本地文件以後，發現最重要的dist文件沒有被提交到github上，以下圖

dist文件是npm run build執行後被編譯打包生成的文件，CSS、JS、圖片等文件都在dist文件中，因此該文件必需要提交到github上。

在項目根目錄下有一個.gitignore文件，文件中設置一些文件名，對應的文件將不會被提交到github上面。

在.gitignore文件中，確實有dist文件名，以下圖

把.gitignore文件中的dist文件名刪除，而後從新push到github上就有了dist文件

路徑問題

解決完上面dist文件的問題以後，打開該文件路徑下的github pages預覽地址，仍是顯示空白頁，以下圖

咱們查看控制檯，能夠看到文件的路徑都出現了問題，以下圖

路徑

這裏解釋一下路徑問題中/、./、../的區別：

• /
  以/開頭的路徑就是絕對路徑，/是指根目錄，這裏的根目錄在本地就是指磁盤，在github上面就是指倉庫的根目錄，在網站上就是指服務器的根目錄
• ./
  以./開頭的路徑是相對路徑，相對的是自身文件所在的目錄，以下兩種狀況是沒有區別的

  ./image/author.png
  image/author.png複製代碼

• ../
../是相對與自身文件的上級目錄，屬於相對路徑

因此上圖中的路徑就出在路徑前面的/，/表示根目錄，咱們總不能把static文件移動到根目錄，這樣就太傻了。

因此咱們要找到配置文件更改下路徑，找到config/index.js文件，以下圖

修改圖中assetsPublicPath的參數，每次npm run build後的文件路徑將會按照參數生成，兩種設置方法：

assetsPublicPath: './'
或
assetsPublicPath: ''

這樣設置以後，再次npm run build，從新push到github上面，打開<your name>.github.io/<repositories>/dist/index.html就能看到預覽頁了

總結

每次的踩坑都是不可預知的，但解決以後是鍛鍊人的，也是有些許成就感的。這裏總結一下此次遇到的問題，但願能夠幫到其餘人。