github上预览自己的vue-cli3.0的项目-CSDN博客

前言

短暂的新年很快就过去了，各位小伙伴还是要尽快适应工作的节奏，博主自己就感觉全身不舒服啊，废话不多说，如题，肯定有很多前端的小伙伴们写了自己的项目，并且也希望自己的项目能够被别人看到不是，但是想要搭建自己的服务器又十分麻烦，费钱费精力，所以众所周知，我们可以利用github自带的gitpages来实现项目的预览效果

百度一下gitpages，其实网上有很多教程，博主这里也不会啰嗦这么多，只是分享下自己在这其中遇到的一些问题，并且怎么去解决

## 准备

首先你得有一个github的账号，这个对于小伙伴们来说，肯定是没有问题的啦。
其次，在github上创建一个新的仓库，将你的项目上传到github上。
最后的准备就是关于gitpages的配置了，其实也非常简单，网上也有很详细的步骤，博主这里将步骤再次贴出来，希望能给小伙伴们少走点弯路。

gitpages设置

这里我们为了方便，所以创建了一个分支，后续打包好的文件就放在这个分支上方便管理

部署

博主使用的是vue-cli3.0创建的vue项目，此前博主百度了很多关于vue项目部署的问题，但是基本上只能搜到vue-cli2.0关于资源路径的问题，与博主想要知道的情况截然不同，因此博主只能不断的去尝试。

我们将vue项目完成之后，按照打包命令，进行打包

npm run build
复制代码

关于3.0的项目如何进行打包配置，网上也有很多优秀的例子，博主也就不多说，感兴趣的小伙伴，也可以去博主上面展示的项目的去看看，其实也都是基本的配置选项，值得一提的是关于publicPath的路径问题，3.0和2.0有很大的不同，其中之一就是修改了baseUrl为publicPath，在3.0的文档中也有关于在gitpage上部署3.0项目的介绍，所以按照文档所说，这里我们的publicPath配置的路径就是“/你的项目名称/”。

最后还是将vue.config.js的配置拿出来，其实都是基本的配置，每一项都可以在3.0的文档中找到具体的解释，所以这里就不在重复啰嗦l

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const externals = {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios',
  'ELEMENT': 'element-ui'
}
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

module.exports = {
  publicPath: '/vue-qiugu-ms/', //基本路径
  outputDir: 'dist',
  productionSourceMap: false,
  assetsDir: 'static',
  filenameHashing: true,
  pages: {
    index: {
      // page 的入口
      entry: "src/main.js",
      // 模板来源
      template: "public/index.html", // 这里用来区分加载那个 html
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    }
  },
  // 高级的方式
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test') {
      // config.externals = externals
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        }),
      //   new UglifyJsPlugin({
      //     uglifyOptions: {
      //       compress: {
      //         warnings: false,
      //         drop_debugger: true,
      //         drop_console: true,
      //       },
      //     },
      //     sourceMap: false,
      //     parallel: true,
      //   }),
      );
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
      config.plugins.push(new BundleAnalyzerPlugin());
    }
  },
  // CSS 相关选项
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {}, // 为所有的 CSS 及其预处理文件开启 CSS Modules。
    modules: false
  },
  // 在多核机器下会默认开启。
  parallel: require('os').cpus().length > 1,
  // PWA 插件的选项。
  pwa: {},
  // 配置 webpack-dev-server 行为。
  devServer: {
    port: 3001,
    open: true,
    proxy: 'http://localhost:8080'
  },
  
  // 第三方插件的选项
  pluginOptions: {}
}
复制代码

问题

博主将打包好的文件上传之后，打开页面还是显示空白页面，查看了很多资料关于空白页面都说是静态资源路径不正确，但是博主打开调试，路径都是没有问题，每个资源单独都能打开加载的，而关于3.0的部署网上基本都找不到，所以一直很长时间博主都准备放弃了

解决

最后还是被博主发现问题的症结所在，原来就是我们设置的路由问题，路由模式这里博主用了history模式，但是history模式是需要后端配置才能使用的，而gitpages我们肯定是无法去配置的，所以找到了问题所在，博主直接使用默认的hash模式，再次打包，部署，点开网页，成功了！

这样整个vue-cli3.0的项目预览就到此完整了，虽然其实比较简单，博主分享出来也是希望新入门的小伙伴们都能有自己的项目，这样看着自己的项目是不是一种成就感悠然升起呢。

题外话

因为我们的预览的静态文件是在主项目的分支下面的，关于怎么只提交dist目录下文件，博主也是尝试了很久，最终选择是check分支下的静态文件和整个主项目，然后运行主项目打包，在将dist目录中的文件复制到check下来的分支中去，虽然实现了，但是感觉很low有没有，于是就查了很多关于git提交的资料，发现了这么一种提交方法

git subtree push --prefix dist origin gh-pages
复制代码

省事的小伙伴可以用这种提交方法尝试一下的哦