首页 > 其他分享 >vue3项目部署到Github

vue3项目部署到Github

时间:2024-09-12 23:35:19浏览次数:10  
标签:Github run name 部署 vue3 actions GitHub uses pnpm

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

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

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

2. 在GitHub上设置部署配置

image

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

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

main.yml 里的内容如下:

# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['main']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:      

# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

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

  1. node版本,根据你的项目实际使用版本设置
  2. 打包目录,一般都是 dist,如果不是的话请修改
  3. 项目脚本,此项目是使用npm构建,如果你使用的是pnpm,或者ymal等,需要手动修改。下面给出pnpm的设置:
steps:
  - name: Checkout
	uses: actions/checkout@v4
  - name: Set up pnpm
	uses: pnpm/action-setup@v4
	with:
	  version: 9
  - name: Set up Node
	uses: actions/setup-node@v3
	with:
	  node-version: 20
	  cache: 'pnpm'
  - name: Install dependencies
	run: pnpm install
  - name: Build
	run: pnpm run build

pnpm的版本也根据你的实际使用而定,后面的内容都一样。其他的请自行查找。

4. 修改你的项目部署根目录

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

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

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

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

6. 访问路径

访问路径:[github账号名称].github.io/[仓库名称]
例如:https://weizwz.github.io/vite-vue3-charts

实例项目代码参考 weiz-vue3-charts

标签:Github,run,name,部署,vue3,actions,GitHub,uses,pnpm
From: https://www.cnblogs.com/weizwz/p/18411342

相关文章

  • 最新24年计算机三级网络技术速过指南之校园网部署的解题方法与思路,包拿分教程
            多了不说少了不唠,直接进入主题。校园网分析这种体型,共15分,五个空,涉及到的考点有十余个,还有两道天选题。目录一、常规题型做题方法:    1.看题干提取要点    2.看图提取要点    3.看空的上下左右提取要点           ......
  • Github_以太网开源项目verilog-ethernet代码阅读与移植(二)
    实验背景在《Github_以太网开源项目verilog-ethernet代码阅读与移植(一)》中简要介绍了verilog-ethernet开源项目的目录构造等基本信息,下面介绍如何使用与移植步骤。实验内容verilog-ethernet项目的使用与移植准备工作实验步骤打开项目的中README.md文件内容如下:信......
  • postgresql-patroni高可用安装部署
    简介patroni+etcd,算是目前比较主流的PG高可用搭配了。patroni都出4.0版本了,一直没时间,断断续续写了好久,最近有人问到,那就当作一个笔记发表吧,自行搭建一个测试库做测试吧。来来回回改了好几遍。文中可能不妨地方没有同步修改的遗漏点。集群规划hostname/ip部署软件备注配置etcd1/......
  • Springboot点餐系统jl9ml(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景与意义随着信息技术的飞速发展和餐饮行业的日益繁荣,传统的点餐方式已难以满足现代消费者对于便捷性、高效性和个性化服务的需求。因此......
  • Springboot大学生志愿者服务智慧管理系统094zx程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景与意义随着社会的快速发展,大学生志愿者服务已成为连接校园与社会的重要桥梁,对促进青年成长、服务社会发挥着不可估量的作用。然而,传统......
  • Springboot党支部建设管理平台d6lh4--(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景与意义随着信息化技术的飞速发展,党建工作也迎来了数字化转型的新机遇。传统党支部管理模式在效率、透明度及数据整合方面存在局限性,难......
  • vue3 判断浏览器打开窗口页签变化
       场景:当需要同时打开两个页签,需要在切换页签的时候,重新获取数据    根据document.visibilityState结果判断。如果为visible则证明回到当前页签, 如果为hidden则证明当前页面未显示(前往了其他页签)import{onMounted,onUnmounted}from'vue';consthan......
  • Springboot党史在线学习系统6fo63--(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景在信息化高速发展的今天,党史学习作为党员教育的重要组成部分,亟需适应时代需求,实现学习方式的创新与升级。因此,开发一套党史在线学习系......
  • Springboot第二课堂素质学分管理系统fma2s--(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景随着教育改革的深入,高校越来越重视学生的全面发展,第二课堂作为培养学生综合素质的重要平台,其重要性日益凸显。然而,传统的管理方式存在......
  • Springboot大学生运动与健康管理380t2程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、项目背景与意义随着社会的快速发展和人们生活水平的提高,大学生运动与健康管理日益成为关注的焦点。大学生作为国家的未来和希望,其身体健康状况......