Vue Cli 创建项目在 GitHub 部署 history 路由模式

1、修改打包路径

在 vue.config.js 中添加  publicPath  配置，其中 teambition-vue 是你项目的 github 名字。否则会找不到资源。

module.exports = {
    ...
    // 部署到github
    publicPath: process.env.NODE_ENV === 'production' ? '/teambition-vue' : '/'
};

 

2、history 模式

GitHub 不支持单页面，使用 history 路由，会出现 404 ，所以把 index.html 的内容 copy 到 404.html 就可以巧妙的解决这个问题。

 

3、部署

进入 dist 目录，把内容推到远程即可

#！ /bin/bash
npm run build
cd ./dist
cp index.html 404.html
git init
git remote add origin https://github.com/G-lory/teambition-vue.git
git add .
git commit -m 'deploy'
git checkout -b gh-pages
git push -u origin gh-pages -f

 

4、访问 https://g-lory.github.io/teambition-vue/ 即可。

即 https://<用户名>.github.io/<项目名>/