Vue vue cli 3.x 项目部署到github page

ue CLI 3.x 项目部署到 GitHub Pages，请看以下步骤

1. 在你的 Vue CLI 3.x 项目中，打开命令行终端

2. npm run build
   ```
   或者如果你使用的是 Yarn：
   ````
   yarn build
   ````
   这将在项目根目录下的 `dist` 文件夹中生成构建后的代码。
   
   

3. 在 GitHub 上创建一个新的仓库，用于托管你的静态页面。确保仓库的名称为 <username>.github.io，其中 <username> 是你的 GitHub 用户名。

4. 在命令行终端中，导航到你的项目根目录

5. git init
   git add .
   git commit -m "Initial commit"
   git remote add origin [https://github.com/ ↗](https://github.com/)<username>/<username>.github.io.git
   git push -u origin master
   

   替换 <username> 为你的 GitHub 用户名。

6. 等待代码推送完成后，访问 https://<username>.github.io 即可查看部署后的项目。

注意事项：

• 确保你已经正确配置了 Vue CLI 3.x 项目的 publicPath，以适应 GitHub Pages 的路径。在 vue.config.js 文件中，可以设置 publicPath: '/'。
• 如果你的项目是基于子路径进行部署的（例如 https://<username>.github.io/<repo>），则需要在 vue.config.js 中设置 publicPath: '/<repo>/'。
• 请确保你已经安装了 Git，并且已经将你的项目初始化为一个 Git 仓库。
• 在推送到 GitHub 仓库之前，确保你已经添加了所有必要的文件，并进行了适当的提交。

这样，你的 Vue CLI 3.x 项目就可以成功部署到 GitHub Pages 上了。

如何在vue.config.js文件中正确配置publicPath以适应GitHub Pages的路径？

vue.config.js 文件中正确配置 publicPath 以适应 GitHub Pages 的路径，按照以下步骤进行操作：

1. 在你的 Vue 项目中，确保在根目录下存在一个名为 vue.config.js 的文件。如果不存在，你可以手动创建该文件。

2. 打开 vue.config.js 文件，并在导出对象中添加一个 publicPath 属性。如果原来的 vue.config.js 文件中已经存在其他配置项，你只需添加或修改 publicPath 配置项即可。如果文件是空的，你可以复制以下代码作为起点：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<repository-name>/'
    : '/'
}

1. 将上述代码中的 <repository-name> 替换为你的 GitHub 仓库的名称，即在 GitHub 上托管你的静态页面的仓库名称。如果你的仓库名称是 <username>.github.io，则将 <repository-name> 替换为 <username>。

2. 保存 vue.config.js 文件。

3. 现在，当你运行 npm run build 或 yarn build 构建生产环境的代码时，publicPath 将根据当前环境自动设置为适应 GitHub Pages 的路径。

• 如果 NODE_ENV 环境变量为 'production'，即在构建生产环境代码时，publicPath 将被设置为 /<repository-name>/。这将确保在部署到 GitHub Pages 时，资源的引用路径是正确的。

• 如果 NODE_ENV 环境变量不是 'production'，即在开发环境或其他环境中，publicPath 将被设置为 '/'，以确保在本地开发或其他环境中正确引用资源。

通过这种方式，你可以根据不同的环境自动适应 GitHub Pages 的路径，从而正确配置 publicPath。这样，在部署到 GitHub Pages 时，你的 Vue 项目的资源引用路径将是正确的。