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/<項目名>/