vue前端静态页面Github Pages线上预览实现

一、前期准备之项目编译

---

此处记录如何解决vue2.0 打包之后，打开index.html出现空白页的问题，附上@参考地址

1. 打包之前修改三个文件

• 第一步，找到build文件，在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码
  
  publicPath:'./'

  output: {
    //在这里加一行代码
    publicPath:'./',

    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

• 第二步，找到utils.js，在 第47行左右 有一个if判断为 if (options.extract),在这里面增加一行代码

说明：这个是保证加载背景图片等css样式资源不出现路径问题

publicPath:'../../'

    if (options.extract) {
      return ExtractTextPlugin.extract({
        publicPath:'../../',
        use: loaders,
        fallback: 'vue-style-loader'
      })
    }

• 第三步，找到config/index.js第46行左右 修改assetsPublicPath 路径为 './';

注意：编译完成后，需要把它改回来，以便在编译器上跑，不然的话页面会出现Error错误

1. 然后你就可以 build 了，

2. 如果 build 完成后，在本地还是空白页，或者放到服务器上面还是是空白页怎么办
   
   这个就有可能是你的路由模式出现了问题,你给的路由模式可能是history 模式,如果设置这个模式的话需要后端的配合,设置一些参数的，所以如果没有后端的配合的话,就把这个路由的 mode 改为 hash 或者是直接删除,就是默认的模式了

---

二、git上传代码等常规操作

---

本模块度娘教的非常仔细，我当时参考的是@git上传代码到github入门学习和相关错误汇总

---

三、此处重点记录使用GitHub Pages实现线上预览功能

此处参考了@报错：Failed to load resource: the server responded with a status of 404 ()，该博主的方案解决了我的问题

由于在GitHub Pages中，请求的是根目录下的index.html文件，而此index.html文件并非项目下index.html,而是编译后的dist文件夹下的index.html文件，若是直接部署项目到GitHub Pages上，则地址可读，但无法获取内容。

因此采用方法为上文链接中博主所叙述方法一：

在编译后，项目中文件均已整合到dist文件夹中，将dist文件夹单独使用git管理，并上传独立分支，以此为依托创建GitHub Pages。