vue項目上傳Github預覽

最近在用Vue仿寫cnode社區，想要上傳到github，並經過Github pages預覽，在這個過程當中遇到了一些問題，所以寫個筆記，以便查閱。

完成Vue項目之後，在上傳到github以前，須要修改一些配置才能經過github pages預覽項目。

1、修改配置

1. 解決文件路徑問題：

打開項目根目錄config文件夾下的index.js文件，進行以下修改：

看清楚是 build（上邊還有個dev 是開發環境下的配置，不須要改動）下的 assetsPublicPath ：將‘/'改成‘./'

1. 背景圖片路徑錯誤

在css中寫的background-img的路徑出錯須要找到build文件夾下的utils.js，修改一下位置
打開根目錄build文件夾中的utils.js文件，在下圖中標出的位置中添加publicPath: '../../'，　

1. 項目打包後dist文件夾下的index.html引入文件沒有引號，這裏的解決方法是：

找到build文件夾下的webpack.prod.conf.js文件，在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify，把minify中的 removeAttributeQuotes: true改成 removeAttributeQuotes:false

2、上傳項目到Github

執行npm run build命令，打包項目

若是隻是想經過github pages預覽項目，不想上傳整個項目代碼，能夠只將dist文件夾下的文件上傳到github上，而後開啓github pages功能預覽。在dist文件夾下執行如下步驟

1.在github裏面新建一個倉庫
2.將dist文件夾中的文件上傳到這個倉庫中

• git init
• git add .
• git commit -m '描述信息'
• 關聯到遠程倉庫：git remote add origin ...
• git push -u origin master

若是想管理項目的同時又能夠預覽，能夠將整個項目都上傳到github，而後將dist文件夾中的文件上傳到倉庫分支中，步驟以下：

1.在github裏面新建一個倉庫,
2.將整個項目上傳到github

• git init
• git add .
• git commit -m '描述信息'
• 關聯到遠程倉庫：git remote add origin ...
• git push -u origin master

3.而後將遠程倉庫克隆到本地
git clone ...

4.接着在這個倉庫中建一個分支
生成分支gh-pages並切換到此分支
進入到克隆獲得的文件夾中，執行以下命令
git checkout --orphan gh-pages

5.將克隆獲得的文件裏面除了.git文件之外的文件所有刪掉，再將項目根目錄下打包後生成的dist文件夾裏面的內容複製到克隆文件中。
依次執行如下命令：
git add .
git commit -m 「描述信息」
git remote add origin ....（這一步根據本身建立的倉庫名來寫）
git push -u origin gh-pages （push文件到倉庫中,注意後面是分支的名字,不是master）