Vue.js 项目在 GitHub 上预览时遇到的问题及其解决方案

2023-12-13 09:27:09

Vue.js 项目概述

Vue.js 是一种流行的前端框架，用于构建交互式网页应用。Vue.js CLI 是一个官方工具，可以快速创建和管理 Vue.js 项目。Vue.js CLI 提供了多种命令，包括 npm run dev 和 npm run build，分别用于在本地开发和构建项目。

npm run dev 与 npm run build 的区别

npm run dev 命令用于在本地开发 Vue.js 项目。此命令将启动一个开发服务器，并在浏览器中打开项目。开发服务器会自动检测文件更改，并在每次更改时重新编译项目。这使开发人员可以快速迭代和测试他们的代码。

npm run build 命令用于构建 Vue.js 项目。此命令将创建一个生产就绪的构建，可以部署到生产环境。构建过程将编译项目的所有文件，并将其压缩成一个或多个文件。构建后的项目可以上传到服务器或部署到 CDN。

GitHub Pages 预览问题

在 GitHub 上预览使用 Vue.js CLI 构建的项目时，可能会遇到以下问题：

在 GitHub 上预览时，看到的是 npm run build 之后 dist 文件夹中的 index.html 文件，而不是项目根目录下的 index.html 文件。
在 GitHub 上预览时，项目无法正确加载样式表或脚本文件。
在 GitHub 上预览时，项目出现跨域错误。

解决方案

正确配置 GitHub Pages

为了正确配置 GitHub Pages，需要在项目根目录下创建一个名为 .github/workflows 的文件夹，并在其中创建一个名为 main.yml 的文件。main.yml 文件的内容如下：

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build

      - uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: dist