githubPage部署Vue项目

github中新建项目

  1. my-web (编写vue项目代码)

  2. myWebOnline(存放Vue打包后的dist包里面的文件)

发布流程

(假设my-web项目已经编写完成)Vue-cli

my-web

  1. vue.config.js文件中

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: process.env.NODE_ENV === 'production'? '/myWebOnline/'   // *** 注意修改文件名: '/'
    })  
  1. 项目根目录里新建deploy.sh

    2.1 注意修改 git push -f git@github.com:ProgrammerMao-001/myWebOnline.git master:gh-pages 中ProgrammerMao-001为你自己github的名称

    #!/usr/bin/env sh
    ​
    # 当发生错误时中止脚本
    set -e
    ​
    # 构建
    npm run build
    ​
    # cd 到构建输出的目录下
    cd dist
    ​
    # 部署到自定义域域名
    # echo 'www.example.com' > CNAME
    ​
    git init
    git add -A
    git commit -m 'deploy'
    ​
    # 部署到 https://<USERNAME>.github.io
    # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
    ​
    # 部署到 https://<USERNAME>.github.io/<REPO>
    git push -f git@github.com:ProgrammerMao-001/myWebOnline.git master:gh-pages 
    ​
    cd -
  1. npm run build

myWebOnline

  1. 将dist文件夹中所有文件复制到本项目中

  2. git add .

  3. git commit -m "write something"

  4. git push origin main

github 页面配置

注意事项

  1. 发布完静等更新即可,一般两三分钟

  2. 每次重新push之后无需有其他操作,静等更新即可

  3. vue项目中路由模式推荐为 hash

  4. 以上针对vue-cli创建的项目

非脚手架项目

  1. 在原项目中build然后发布

  2. 配置githubPage即可(无需新建新的项目)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/65688.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV(八):图像二值化

目录 1.固定值二值化 2.自适应阈值二值化 3.Android JNI完整代码 1.固定值二值化 固定阈值二值化是OpenCV中一种简单而常用的图像处理技术&#xff0c;用于将图像转换为二值图像。在固定阈值二值化中&#xff0c;像素值根据一个预定义的阈值进行分类&#xff0c;大于阈值的…

容器权限降级为 op 用户

容器权限降级为 op 用户 更新 Docker Compose 配置文件&#xff1a; 请确保已提供的 docker-compose.yml 文件已准备好&#xff0c;并覆盖了原先的配置文件。 cd /home/op/compose设置文件和文件夹权限&#xff1a; 在 Linux 环境中&#xff0c;按照以下步骤逐一执行命令。在需…

socket,tcp,http三者之间的原理和区别

目录 1、TCP/IP连接 2、HTTP连接 3、SOCKET原理 4、SOCKET连接与TCP/IP连接 5、Socket连接与HTTP连接 socket&#xff0c;tcp&#xff0c;http三者之间的区别和原理 http、TCP/IP协议与socket之间的区别 下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置…

对比Flink、Storm、Spark Streaming 的反压机制

分析&回答 Flink 反压机制 Flink 如何处理反压? Storm 反压机制 Storm反压机制 Storm 在每一个 Bolt 都会有一个监测反压的线程&#xff08;Backpressure Thread&#xff09;&#xff0c;这个线程一但检测到 Bolt 里的接收队列&#xff08;recv queue&#xff09;出现了…

软件测试/测试开发丨文件上传与弹窗处理 学习笔记

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27071 一、文件上传 input标签可以直接使用send_keys(“文件路径/文件名”)上传文件 ele01 driver.find_element(By.ID,“上传按钮id”)ele01.send_keys(…

Java异常(Error与Exception)与常见异常处理——第八讲

前言 前面我们讲解了Java的基础语法以及面向对象的思想,相信大家已经基本掌握了Java的基本编程。在之前代码中,我们也看到代码写错了编译器会提示报错,或者编译器没有提示,但是运行的时候报错了,比如前面的数组查询下标超过数组的长度。所以在使用计算机语言进行项目开发的…

敲笨钟ptaC++

substr string a "123456"; string sub_a a.substr(0, 2); // "12"string sub_a_ a.substr(2); // "3456"左闭右开的截取字符串 实现思路 以逗号分割&#xff0c;取出两个字符串。利用substr判断是否以ong结尾&#xff0c;然后使用string流…

(一)连续随机量的生成-从t分布采样

连续随机量的生成-从t分布采样 1. t t t 分布2. 从 t t t 分布采样3. Python编程实现 1. t t t 分布 t t t 分布作为 t t t 检验的抽样分布出现。 令 z 1 , ⋯ , z n z_1, \cdots, z_n z1​,⋯,zn​ 为 i.i.d&#xff0c;分布为 N ( μ , σ 2 ) N\left(\mu, \sigma^2\rig…

简单了解ICMP协议

目录 一、什么是ICMP协议&#xff1f; 二、ICMP如何工作&#xff1f; 三、ICMP报文格式 四、ICMP的作用 五、ICMP的典型应用 5.1 Ping程序 5.2 Tracert(Traceroute)路径追踪程序 一、什么是ICMP协议&#xff1f; ICMP因特网控制报文协议是一个差错报告机制&#xff0c;…

实力认证!OceanBase获“鼎信杯”优秀技术支撑奖

6 月 30 日&#xff0c;2023 “鼎信杯”信息技术发展论坛在京隆重举办第二届“鼎信杯”大赛颁奖典礼。OceanBase 凭借完全自主研发的原生分布式数据库&#xff0c;以及丰富的核心系统国产数据库升级案例&#xff0c;斩获“优秀技术支撑奖”。 论坛上&#xff0c;国内首个基于在…

ThreeJS 模型中内嵌文字

之前有过模型中内嵌html网页&#xff0c;地址☞threeJS 模型中加载html页面_threejs 加载dom元素_小菜花29的博客-CSDN博客 这次是纯粹的在模型中嵌入文本信息&#xff0c;进行简单的文字展示 展示效果图 1. 使用FontLoader文字加载器 引入文本json文件&#xff0c;代码如下…

数据结构(Java实现)-排序

排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序&#xff…

2022年下半年系统架构设计师真题(下午带答案)

试题一 (25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…

#systemverilog# 之 event region 和 timeslot 仿真调度(七)Active/NBA 咋跳转的?

目录 一 目的 二 案例分析 2.1 先Active域,后 NBA 域 2.2 先Active域,后 NBA 域,后NBA域

数据结构(Java实现)-Map和Set

搜索树 概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左右子树也…

快速上手GIT命令,现学也能登堂入室

系列文章目录 手把手教你安装Git&#xff0c;萌新迈向专业的必备一步 GIT命令只会抄却不理解&#xff1f;看完原理才能事半功倍&#xff01; 快速上手GIT命令&#xff0c;现学也能登堂入室 系列文章目录一、GIT HELP1. 命令文档2. 简要说明 二、配置1. 配置列表2. 增删改查3. …

python自动化测试-自动化基本技术原理

1 概述 在之前的文章里面提到过&#xff1a;做自动化的首要本领就是要会 透过现象看本质 &#xff0c;落实到实际的IT工作中就是 透过界面看数据。 掌握上面的这样的本领可不是容易的事情&#xff0c;必须要有扎实的计算机理论基础&#xff0c;才能看到深层次的本质东西。 …

【C++深入浅出】类和对象上篇(类的基础、类的模型以及this指针)

目录 一. 前言 二. 面向对象与面向过程 2.1 面向过程 2.2 面向对象 三. 类的基础知识 3.1 类的引入 3.2 类的定义 3.3 成员变量的命名规则 3.4 封装 3.5 类的访问限定符 3.6 类的作用域 3.7 类的实例化 四. 类的对象模型 4.1 类对象的大小 4.2 类对象的存储方式 …

从Matrix-ResourceCanary看内存快照生成-ForkAnalyseProcessor(2)

不同于LeakCanary,在Matrix中,主要是通过Resource Canary来监控内存泄漏问题的,且监听的泄漏对象只支持Activity,官方说明如下: 结合分析LeakCanary的经验可知,要实现Activity内存泄漏监听,总体上应该要实现两大功能: Activity生命周期监控查找泄漏对象并得到GC Root P…

LeetCode-45-跳跃游戏Ⅱ-贪心算法

题目描述&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到…