Vue应用创建并将其部署到GitHub Pages的过程

Important

创建一个Vue应用并将其部署到GitHub Pages的全流程可以分为以下几个步骤：

创建Vue应用

首先，确保你的开发环境中已安装Node.js和npm。然后，使用Vue CLI来创建一个新的Vue项目。

1. 全局安装Vue CLI（如果尚未安装）:

npm install -g @vue/cli

2. 创建一个新的Vue项目:

vue create my-vue-app

3. 按照提示选择配置（你可以选择默认配置）。

4. 进入项目目录:

cd my-vue-app

配置Vue项目以适应GitHub Pages

你需要做一些配置，以确保Vue应用可以在GitHub Pages上正确运行。

在vue.config.ts文件中配置publicPath。如果文件不存在，你需要创建它。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<REPO_NAME>/' // 替换<REPO_NAME>为你的GitHub仓库名称
    : '/'
}

构建项目

运行以下命令来构建生产环境的代码：

npm run build

这将在dist目录中生成生产环境的代码。

将构建的文件推送到GitHub

在GitHub上创建一个新的仓库。

初始化本地git仓库并添加GitHub仓库为远程仓库：

git init
git remote add origin https://github.com/<USERNAME>/<REPO_NAME>.git

替换<USERNAME>和<REPO_NAME>为你的GitHub用户名和仓库名。

添加dist目录到一个新的git分支，通常命名为gh-pages：

git add dist
git commit -m "Initial dist subtree commit"
git subtree push --prefix dist origin gh-pages

配置GitHub Pages

在GitHub仓库页面，转到“Settings”。

在左侧菜单中找到“Pages”部分。

在“Source”部分，选择gh-pages分支并保存。

访问你的应用

GitHub Pages将在几分钟内自动部署你的页面。你可以通过访问https://<USERNAME>.github.io/<REPO_NAME>/来查看你的Vue应用，其中<USERNAME>是你的GitHub用户名，<REPO_NAME>是你的仓库名。

通过遵循这些步骤，你可以成功地将你的Vue应用部署到GitHub Pages。