Vue项目打包部署到GitHub Pages的实现步骤

下面是关于Vue项目打包部署到GitHub Pages的实现步骤的完整攻略，步骤如下：

准备工作

1. 先在GitHub上创建一个新的仓库，用来托管我们打包后的代码
2. 确保本地已经安装好了node.js和npm，如果没有可以上官网下载
3. 确保本地已经安装好了Vue-cli脚手架工具

npm install -g vue-cli

构建Vue项目

使用Vue-cli构建一个Vue项目，然后在项目中运行如下命令：

npm run build

这个命令执行完毕后，在项目的根目录下会生成一个dist文件夹，里面是我们应用程序打包后的代码。

安装gh-pages

我们使用gh-pages来实现将我们的网站打包后发布到GitHub Pages上的功能。可以通过以下命令来安装：

npm install gh-pages --save-dev

修改项目配置文件

打开项目根目录下的package.json文件，找到scripts对象，添加如下代码：

"deploy": "npm run build && gh-pages -d dist"

这段代码的用途是，首先运行npm run build命令打包代码，然后执行gh-pages -d dist命令发布打包后的代码到GitHub Pages上。

部署代码

1. 根据第一步创建的仓库名称，在根目录下执行如下命令进行初始化：

git init
git remote add origin https://github.com/用户名/仓库名.git

1. 执行如下命令生成gh-pages分支：

git checkout -b gh-pages

1. 执行如下命令将代码提交到gh-pages分支：

git add .
git commit -m "Initial commit"
git push origin gh-pages

1. 在执行如下命令将打包后的代码部署到GitHub Pages上：

npm run deploy

示例说明

步骤的整体过程就是这样。接下来以两个示例说明以上步骤的每个过程：

示例1

项目名：my-vue-app，GitHub账户名：example，仓库名为my-vue-app。通过以下命令完成部署：

vue init webpack my-vue-app
cd my-vue-app
npm run build            // 创建打包文件
npm install gh-pages --save-dev    // 安装gh-pages

修改package.json文件：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js && npm run deploy",
  "deploy": "gh-pages -d dist",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
  "build-storybook": "build-storybook -c storybook -o dist/storybook"
},

打开终端窗口，切换到该项目文件夹下，执行如下命令完成代码发布：

npm run deploy

然后你可以发现你的应用程序已经可以通过example.github.io/my-vue-app/来访问到。

示例2

项目名：test-vue-project，GitHub账户名：testaccount。

1. 创建test-vue-project的仓库testaccount/test-vue-project
2. 使用Vue-cli创建test-vue-project项目

vue init webpack test-vue-project
cd test-vue-project
npm run build
npm install gh-pages --save-dev

1. 修改package.json，添加部署命令

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "build": "node build/build.js",
  "deploy": "gh-pages -d dist",
  "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
  "test": "npm run unit",
  "e2e": "node test/e2e/runner.js",
  "build-storybook": "build-storybook -c storybook -o dist/storybook"
},

1. 使用git将代码推送到GitHub上

git init
git add .
git commit -m "initial commit"
git remote add origin [e-mail]:testaccount/test-vue-project.git
git branch -M main
git push -u origin main

1. 发布应用程序到GitHub Pages

npm run deploy

打开终端窗口，切换到该项目文件夹下，执行如下命令完成代码发布：

npm run deploy

最后，你可以通过testaccount.github.io/test-vue-project/访问你的网站。

希望这些例子能够帮助你理解如何将Vue项目部署到GitHub Pages上。