vue3项目部署到Github

此教程适应于以webpack，vue-cli，vite等脚手架构建的vue项目。当然，vue2和vue3都是可以滴。

1. 前提：你的代码库已经提交到Github上

如果没有的话，请到GitHub上新建仓库，并把你本地的项目提交到GitHub上新建的仓库里。
具体方法，可以参考我的博客 Git使用记录 - 持续更新 - 将本地项目关联到远程仓库
2. 在GitHub上设置部署配置

3. 到你的项目根目录创建工作流文件

根目录下新建 .github 文件夹，然后在其目录下新建 workflows 文件夹，在里面新建 main.yml 。

main.yml 里的内容如下：

1. # 将静态内容部署到 GitHub Pages 的简易工作流程
2. name: Deploy static content to Pages
4. on:
5.   # 仅在推送到默认分支时运行。
6.   push:
7.     branches: ['main']
9.   # 这个选项可以使你手动在 Action tab 页面触发工作流
10.   workflow_dispatch:      
12. # 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
13. permissions:
14.   contents: read
15.   pages: write
16.   id-token: write
18. # 允许一个并发的部署
19. concurrency:
20.   group: 'pages'
21.   cancel-in-progress: true
23. jobs:
24.   # 单次部署的工作描述
25.   deploy:
26.     environment:
27.       name: github-pages
28.       url: ${{ steps.deployment.outputs.page_url }}
29.     runs-on: ubuntu-latest
30.     steps:
31.       - name: Checkout
32.         uses: actions/checkout@v3
33.       - name: Set up Node
34.         uses: actions/setup-node@v3
35.         with:
36.           node-version: 20
37.           cache: 'npm'
38.       - name: Install dependencies
39.         run: npm install
40.       - name: Build
41.         run: npm run build
42.       - name: Setup Pages
43.         uses: actions/configure-pages@v3
44.       - name: Upload artifact
45.         uses: actions/upload-pages-artifact@v1
46.         with:
47.           # Upload dist repository
48.           path: './dist'
49.       - name: Deploy to GitHub Pages
50.         id: deployment
51.         uses: actions/deploy-pages@v1

复制代码

其中我们需要修改的内容：

• node版本，根据你的项目实际使用版本设置
  
• 打包目录，一般都是 dist，如果不是的话请修改
  
• 项目脚本，此项目是使用npm构建，如果你使用的是pnpm，或者ymal等，需要手动修改。下面给出pnpm的设置：
  

1. steps:
2.   - name: Checkout
3.         uses: actions/checkout@v4
4.   - name: Set up pnpm
5.         uses: pnpm/action-setup@v4
6.         with:
7.           version: 9
8.   - name: Set up Node
9.         uses: actions/setup-node@v3
10.         with:
11.           node-version: 20
12.           cache: 'pnpm'
13.   - name: Install dependencies
14.         run: pnpm install
15.   - name: Build
16.         run: pnpm run build

复制代码

pnpm的版本也根据你的实际使用而定，后面的内容都一样。其他的请自行查找。
4. 修改你的项目部署根目录

正常情况下一般都在 vite.config.ts 或 vue.config.js 或 webpack.config.js 里，取决于你使用了哪种脚手架。
以 vite.config.ts 为例，存在 base 字段中。参考代码 vite-vue3-charts

如果你有封装的话，如上图，可能是一个变量，一般都在根目录的 .env.production 文件中，修改此变量的值即可。如下图：

5. 提交代码，你的项目即可自动部署

或者到GitHub网站仓库目录，在 Actions 页签中，手动部署

6. 访问路径

访问路径：[github账号名称].github.io/[仓库名称]
例如：https://weizwz.github.io/vite-vue3-charts
实例项目代码参考 weiz-vue3-charts

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！