如何用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文件的項目，如官網，用下面方法

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