如何把Vue项目部署到github之类的

172 阅读1分钟

配置publicPath

// 生产环境则添加以下路径,此路径为你的仓库名
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? "/diandi-financials-demo/"
    : '/',
}

生成dist,本地预览生产环境

  • npm run build 生成dist目录

本地对即将发布到生产环境状态的项目进行预览最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve

  • 安装serve npm install -g serve
  • 运行serve,预览dist serve -s dist
# -s 参数的意思是将其架设在 Single-Page Application 模式下

本地写一个sh脚本用以自动更新代码到远程仓库

在项目目录下,创建内容如下的 deploy.sh 并运行它以进行部署:sh deploy.sh

  • 在这里,我选择了在github中新建一个仓库,专用于放置dist里面的文件,把新建的仓库名代替到下面的<REPO>位置
  • 运行如下代码可以自动把本地dist中的master分支push到新仓库的gh-pages分支,且自动生成了链接
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -