使用GitHub Pages发布vue项目步骤

1. 创建一个项目 vue-demo

2. 将本地创建的项目中 如果有 config文件夹 则进入到config文件夹中index.js 里修改 assetsPublicPath 为“./”
   build: {
   // Template for index.html
   index: path.resolve(__dirname, ‘…/dist/index.html’),

   // Paths
   assetsRoot: path.resolve(__dirname, ‘…/dist’),
   assetsSubDirectory: ‘static’,
   assetsPublicPath: ‘./’,

   /**

   • Source Maps
     */

   productionSourceMap: true,
   // https://webpack.js.org/configuration/devtool/#production
   devtool: ‘#source-map’,

   // Gzip off by default as many popular static hosts such as
   // Surge or Netlify already gzip all static assets for you.
   // Before setting to true, make sure to:
   // npm install --save-dev compression-webpack-plugin
   productionGzip: false,
   productionGzipExtensions: [‘js’, ‘css’],

   // Run the build command with an extra argument to
   // View the bundle analyzer report after build finishes:
   // npm run build --report
   // Set to true or false to always turn it on or off
   bundleAnalyzerReport: process.env.npm_config_report
   }

3. 将本地创建的项目中 如果有 build文件夹 则进入到build文件夹中webpack.prod.conf 里修改 removeAttributeQuotes为false
   new HtmlWebpackPlugin({
   filename: process.env.NODE_ENV === ‘testing’
   ? ‘index.html’
   : config.build.index,
   template: ‘index.html’,
   inject: true,
   minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: false
   // more options:
   // https://github.com/kangax/html-minifier#options-quick-reference
   },
   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   chunksSortMode: ‘dependency’
   }),

4. 进行打包 npm run build 将生成一个dist文件 直接打开dist中的index.html 可以直接打开项目

5. 修改.gitignore 将 /dist删除 （为了把dist文件夹上传到项目中）

6. 使用git命令等上传项目

7. 在自己的github上新建一个项目 （注意：如果是设置的项目是私人的，则需要付款才可以外部访问）

8. 在新建的github上setting中 设置 GitHub Pages Source选择相对应的项目分支 保存

9. 最后使用https://xxx/webapp/dist进行访问项目