vue項目發佈到github演示

 打包Vue項目

當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能夠看到字體圖標正常顯示了。
這裏爲何須要這樣修改，能夠參考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命令：

一、先進入項目文件夾，經過命令 git init 把這個目錄變成git能夠管理的倉庫

git init

二、把文件添加到版本庫中，使用命令 git add .添加到暫存區裏面去，不要忘記後面的小數點「.」，意思爲添加文件夾下的全部文件。

git add .

三、用命令 git commit告訴Git，把文件提交到倉庫。引號內爲提交說明。

git commit -m 'message'

四、關聯到遠程庫。

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

五、將項目全部push文件到倉庫中。

git push -u origin master

• 第五步操做時，有時會失敗，個人方法是將 u 改成 f 來提交，即輸入命令git push -f origin master
  回到github中該項目的倉庫，項目文件就提交上去了，若失敗，請仔細覈對步驟。

 

製做github在線預覽效果

github製做預覽是須要利用GitHub Pages的，點擊項目倉庫的setting,找到source,切換到master branch,點擊保存。

點擊GitHub Pages下面出現的網址即爲預覽地址，可是此時點擊進去會發現沒有頁面效果，不要緊，下面繼續：

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

生成gh-pages分支步驟：

一、將遠程倉庫克隆到本地：

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

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

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

三、將本地克隆文件(文件名爲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的數據。