vue项目打包上传github并制作预览链接的方法

# Vue项目打包上传GitHub并制作预览链接的方法

## 前言

在Vue项目开发完成后，我们通常需要将项目部署到线上环境供他人访问。GitHub Pages提供了一种简单免费的静态网站托管方案，非常适合展示Vue打包后的静态资源。本文将详细介绍如何将Vue项目打包后上传至GitHub仓库，并通过GitHub Pages生成可访问的预览链接。

## 一、Vue项目打包

### 1. 配置生产环境

在打包前，请确保项目根目录下的`vue.config.js`文件中已配置正确的`publicPath`（Vue CLI 3+项目）：

```javascript
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/repository-name/'  // 替换为你的仓库名
    : '/'
}

注意：如果项目部署在域名根目录，可设为'/'；若部署在子路径（如GitHub Pages），需设为'/repository-name/'

2. 执行打包命令

npm run build

打包完成后会在项目根目录生成dist文件夹，包含： - index.html（入口文件） - static目录（静态资源） - 其他构建生成的资源文件

3. 本地测试打包结果

可使用serve工具测试打包效果：

npm install -g serve
serve -s dist

访问http://localhost:5000确认页面显示正常

二、上传至GitHub仓库

1. 初始化Git仓库

如果项目未初始化Git，需先执行：

git init

2. 创建GitHub仓库

1. 登录GitHub账号
2. 点击右上角”+” → “New repository”
3. 填写仓库名（建议全小写，避免路径问题）
4. 选择Public/Private（Pages仅支持Public仓库免费使用）

3. 关联远程仓库

git remote add origin https://github.com/yourname/repository-name.git

4. 提交并推送代码

git add .
git commit -m "initial commit"
git branch -M main
git push -u origin main

三、部署到GitHub Pages

方法一：自动部署（推荐）

1. 创建gh-pages分支：

npm install gh-pages --save-dev

1. 在package.json中添加脚本：

"scripts": {
  "deploy": "gh-pages -d dist"
}

1. 执行部署：

npm run deploy

方法二：手动部署

1. 进入dist目录初始化新仓库：

cd dist
git init
git checkout -b gh-pages
git add .
git commit -m "deploy"

1. 关联远程仓库并推送：

git remote add origin https://github.com/yourname/repository-name.git
git push -f origin gh-pages

四、配置GitHub Pages

1. 进入仓库 → Settings → Pages
2. 选择gh-pages分支作为源
3. 选择根目录/(root)
4. 点击Save保存

等待1-2分钟后，即可通过https://yourname.github.io/repository-name/访问

五、自定义域名（可选）

如需使用自定义域名：

1. 在仓库Settings → Pages中填写域名
2. 在域名DNS解析中添加CNAME记录：

   
   yourdomain.com CNAME yourname.github.io
   

3. 在项目public目录下创建CNAME文件（无后缀），内容为域名

六、常见问题解决

1. 页面空白问题

• 检查publicPath配置是否正确
• 确保路由使用history模式时配置了fallback

2. 资源404错误

• 检查路径是否区分大小写
• 确认资源是否被正确打包

3. 更新后页面未变化

• 清除浏览器缓存
• 重新执行部署命令

七、自动化部署进阶

可通过GitHub Actions实现CI/CD自动化：

1. 创建.github/workflows/deploy.yml文件
2. 添加配置：

name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Install and build
        run: |
          npm install
          npm run build
          
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

结语

通过上述步骤，我们实现了： 1. Vue项目的生产环境打包 2. 代码托管到GitHub仓库 3. 利用GitHub Pages生成可访问链接 4. 可选的自定义域名配置

这种方式特别适合个人项目展示、技术文档部署等场景，既免费又无需复杂服务器配置。随着项目迭代，只需重复打包部署流程即可更新线上版本。

最终预览链接格式：
https://<username>.github.io/<repository-name>/ “`

（注：实际字数约1500字，可根据需要删减部分章节调整到1300字左右）