vue項目發布到github演示


 打包Vue項目

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

npm run build

實際上此命令就是執行build.js文件,將項目打包成靜態資源。
此命令完成后,項目根目錄下會多出一個dist文件夾,dist文件里面有:
30082494.jpg
static文件下包括項目打包后的css、js、img、fonts(字體圖標)。

 
項目資源無法加載

點擊index.html,瀏覽器顯示該頁面是空白的,打開控制台看到:
5971079.jpg
這里看到index.html文件中沒有加載任何css、js文件,解決方法:

  • 打開項目根目錄 config 下的 index.js 文件,進行如下修改:
    15749381.jpg
  • 將 assetsPublicPath: '/', 改為 assetsPublicPath: './',

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

 
字體圖標無法加載

頁面中用background加載的圖片可以正常顯示,但是所有的字體圖標都不能正常顯示,解決方法:打開根目錄下 build 中的 utils.js 文件,在控制build樣式文件代碼中添加 publicPath: '../../', 如下:
63452149.jpg
保存后,依舊重新'npm run build',打開dist目錄下的index.js可以看到字體圖標正常顯示了。
這里為什么需要這樣修改,可以參考https://github.com/vuejs-templates/webpack/issues/166。

 
Mock數據無法正常加載

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

 
利用git命令將項目上傳到github

首先設置SSH key,網上的教程很多,推薦一個簡書里面的兩種方法上傳本地文件到github,完成后在github里面新建一個一個存放項目的倉庫(建議勾選上初始化),git命令:

1、先進入項目文件夾,通過命令 git init 把這個目錄變成git可以管理的倉庫

git init

2、把文件添加到版本庫中,使用命令 git add .添加到暫存區里面去,不要忘記后面的小數點“.”,意思為添加文件夾下的所有文件。

git add .

3、用命令 git commit告訴Git,把文件提交到倉庫。引號內為提交說明。

git commit -m 'message'

4、關聯到遠程庫。

git remote add origin 你的遠程庫地(如:https://github.com/Aaron0525/Vue-juejin-App.git)

5、將項目所有push文件到倉庫中。

git push -u origin master

  • 第五步操作時,有時會失敗,我的方法是將 u 改為 f 來提交,即輸入命令git push -f origin master
    回到github中該項目的倉庫,項目文件就提交上去了,若失敗,請仔細核對步驟。
 
制作github在線預覽效果

github制作預覽是需要利用GitHub Pages的,點擊項目倉庫的setting,找到source,切換到master branch,點擊保存。
53441109.jpg
點擊GitHub Pages下面出現的網址即為預覽地址,但是此時點擊進去會發現沒有頁面效果,沒關系,下面繼續:

我們生成githubPages的目的就是需要生成一個gh-pages分支(正常情況下只有一個master分支)。

生成gh-pages分支步驟:

1、將遠程倉庫克隆到本地:

git clone https://github.com/Aaron0525/Vue-juejin-App.git(項目克隆地址)

2、生成分支gh-pages並切換到此分支

cd flexSupplement (進入到你克隆倉庫的本地文件夾)
git checkout --orphan gh-pages (創建分支並切換)

3、將本地克隆文件(文件名為github倉庫名)里面除.git文件以外的其他文件全部刪除,再將根目錄下dist文件夾里面的內容復制到克隆文件中。

依次執行以下命令:
git add . (將本地所有文件加到倉庫里)
git commit -m "message" (設置提交信息)
git remote add origin https://github.com/Aaron0525/ Vue-juejin-App.git(本地倉庫鏈接遠程倉庫)
git push -u origin gh-pages (push文件到倉庫中)

完成以上步驟后,回到github里面,點擊上面說到的GitHub Pages下面的地址,既能預覽效果,同樣這里面還是無法顯示mock的數據。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM