vue cli 3.x 项目部署到 github pages的方法

1. 使用 Vue CLI 3.x 创建应用程序
   在命令行中输入以下命令，使用Vue CLI 3.x创建一个名为“my-project”的基本Vue应用程序：

vue create my-project

创建基本应用程序后，您需要将其推送到Github存储库中。要使用Github Pages部署Vue应用程序，您需要使用用户名.github.io的仓库名称。

1. 创建 Github 仓库

登录到您的GitHub帐户并创建一个新仓库，该仓库名称应该是“您的用户名.github.io”，这是Github Pages托管的URL格式。

您可以在Github仓库设置中设置仓库的名称和描述，或者使用以下命令在命令行中创建新的Github仓库：

$ cd my-project
$ git init
$ git remote add origin [e-mail]:您的用户名/您的用户名.github.io.git
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master

1. 配置 GitHub Pages

在GitHub仓库中，单击右上角的“Settings”按钮，然后向下滚动到“GitHub Pages”部分。

在“GitHub Pages”选项中，选择“master branch”作为源，并单击“Save”。

1. 在 package.json 文件中添加 homepage 属性

打开 package.json 文件，添加 "homepage" 属性到此文件：

"homepage": "https://您的用户名.github.io/您的应用程序名称/"

注意，您需要将“your-username”和“your-app-name”替换为正确的值。

1. 配置 Vue CLI 3.x 生成的项目

在您的Vue CLI 3.x项目根目录中创建一个“vue.config.js”文件，添加以下代码：

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/您的仓库名称/'
: '/'
}

此配置将确保在构建Vue CLI 3.x应用程序时，所有生成的文件路径都相对于您的Github存储库的根路径。

1. 生成和部署应用程序

现在您已经完成了部署Vue CLI 3.x应用程序到GitHub Pages所需的所有配置。接下来，您需要在命令行中生成应用程序，并将生成的文件推送到Github存储库中。

npm run build

然后运行以下命令将生成的文件推送到Github存储库：

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

现在您应该可以在您的账户的 https://您的用户名.github.io/您的仓库名称/ URL上看到应用程序的部署结果。

示例1：将已存在的Vue项目部署到Github Pages

如果您已经有一个Vue应用程序，并且想将其部署到Github Pages中，则可以使用以下步骤：

1. 在Github上创建一个新的存储库
2. 在Vue应用程序根目录中创建“vue.config.js”文件，并按上述第5步进行配置。
3. 然后按照第6步中的命令行指令进行应用程序的构建和部署。

示例2: 使用Vue CLI 3.x进行新的Vue项目的开发和部署

如果您是使用Vue CLI 3.x创建的全新Vue项目，您可以使用以下步骤来部署您的应用程序：

1. 使用Vue CLI创建基本Vue应用程序，使用上述第1步提到的命令。
2. 按照第3-6步的说明在Github中创建存储库并完成配置。
3. 示范代码在“/src/router/index.js”文件中，将路由的基本路径设置为存储库名称。

const router = new VueRouter({
mode: 'history',
base: '/您的仓库名称/', // 这里需要填入仓库名
routes
})

1. 然后按照第6步的说明进行应用程序的构建和部署。

祝您部署愉快！