如何用github的gh-pages分支展現本身的項目

 1.先用npm安裝 gh-pages

npm install gh-pages --save-dev

 

2.修改package.json文件

 

3.修改config目錄下的index.js

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,    // npm run build 打包後，js文件會出現.map文件，文件很大很佔空間，這裏設置爲false打包即不會出現.map文件
    devtool: '#source-map',
    productionGzip: false,
}

.map文件的做用在於：項目打包後，代碼都是通過壓縮加密的，若是運行時報錯，輸出的錯誤信息沒法準確得知是哪裏的代碼報錯。

有了map就能夠像未加密的代碼同樣，準確的輸出是哪一行哪一列有錯。

 

4.運行 npm run deploy自動打包並上傳分支gh-pages

npm run deploy

 

運行時間有點久，打包完後便可看到分支

 

5.打開地址便可預覽項目

 

注：多個html文件的項目，如官網，用下面方法

1 git symbolic-ref HEAD refs/heads/gh-pages
2 git add -A
3 git commit -m "描敘"
4 git push origin gh-pages