vue-spa项目在github实现配置展现

前言

也许你确定熟悉github-page ,并知道github支持自定义域名，前提是你新建了这样的一个同名git项目，名称是你的git用户名 ，格式是这样的name.github.io,而后能够经过name.github.io/proname访问到其余的项目。

也许你也很熟悉vue能够实现单页应用，那么是否能够这样，我把vue单页应用打包后的资源直接丢到项目上，这样地址就变成了我单页应用展现的地址。答案是确定的。

建议阅读对象：对github pages不熟悉，以及前端比较小白的童鞋。 建议阅读时间: 10-15min

操做步骤

更改项目为github pages

找到项目设置tab项里对应github pages部分改成下图所示。须要作的有：设置展现的分支，主题能够不选，而后若是你有域名能够直接这里写你绑定的本身的域名，至关于在项目根目录下添加了一个CNAME ,内容就是你的域名，不带协议的。

用vue-cli脚手架初始化你的项目

利用vue-cli脚手架，把你的项目进行初始化，初始化以后你的项目就能够经过localhost:8080访问：具体过程再也不赘述。

备注：若是你遇到了启动失败，是关于localhost的，那么你须要设置本机的host解析： 127.0.0.1 localhost.

更改项目里的设置

咱们知道这个脚手架默认是把打包后的资源丢到dist文件夹的，而dist文件夹是在.gitignore中忽略的，因此咱们须要作如下的操做：

• dist资源须要上传，方便demo的展现 找到根目录.gitignore部分，吧忽略的dist目录删除，这样打包的dist文件就能够被推送了。

• 模板的index页面移动到src中 直接复制过去就行了，同时咱们须要修改如下的几个位置，由于目前咱们就简单考虑dev和prod环境，因此只更改这两个部分的配置。 在build/webpack.dev.conf.js中，找到 HtmlWebpackPlugin的插件配置，其原来template模板本部分配置的是index.html，咱们如今须要改成src/index.html

  new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'src/index.html',
        inject: true
      }),
  复制代码

  同理，在build/webpack.prod.conf.js中，找到 HtmlWebpackPlugin的插件配置，其原来template模板本部分配置的是index.html，咱们如今须要改成src/index.html，与以上相同，这个是改的打包时候的配置。

• 而后还须要纠正打包以后index.html文件的存放位置以及对应资源的加载路径，这部分在config/index.js中build对象的配置下。 打包后的index.html放到根目录，资源部分还在dist中，对应的字段为index，对照原来的，咱们须要把打包后的文件放到../index.html文件中，也就是根目录，不是原来的../dist/index.html,而且资源assetsPublicPath字段还要统一加前缀，/dist/，原来是/，由于index.html与资源的相对关系发生改变了。

  // Template for index.html
      index: path.resolve(__dirname, '../index.html'),
  
      // Paths
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/dist/',
  复制代码

代码推送

将你本地的代码推送到github，而后经过name.github.io/proname 就能够看到你的单页应用了。

总结

本文很是水，只是教你们进行一些配置以及让你的vue单页应用支持更好的展现而不用买服务器，提供给小白少走弯路。