vue3+vite静态页面部署到gitee pages

vue3+vite静态页面部署到gitee pages

    • gitee创建开源仓库
    • 修改项目部署到gitee中

随着vue3的成熟,vue2将在2023.12.31停止维护,所以有必要搞一下vue3项目静态页面怎么部署到gitee中了
如果还有想部署vue2静态页面到gitee中的话,访问https://blog.csdn.net/qq_45952585/article/details/122514028?spm=1001.2014.3001.5502
vue3+vite+ts脚手架创建就不写了,随便搜一搜,一大把,直接上重点

gitee创建开源仓库

  1. 仓库名字自定义 ,例如我的仓库名字是vue3_viteapp;
  2. 一定是要开源

修改项目部署到gitee中

1.修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base: process.env.NODE_ENV === 'production' ? "/vue3_viteapp" : "/",plugins: [vue()],server: {proxy: {'/api': {target: 'http://192.168.1.10:9999',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '/api')},}}
})

注意base属性,这个是最关键的,process.env.NODE_ENV当为production的时候,是代表生产环境,就一定要加上gitee开源仓库的仓库名,否则本地的话就直接斜杠,也就是默认。不要问为什么,因为我也不知道,部署到gitee中生成静态页面的链接就需要这样写才能访问到

2.找到router文件

// router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router';// 导入组件
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import index from '../views/index.vue';
import list from '../views/list.vue';
import news from '../views/list/news.vue';
import system from '../views/list/system.vue';// 定义路由规则
const routes = [{ path: '/home', component: Home },{ path: '/about', component: About },{ path: '/', component: index },{ path: '/list', component: list ,children: [{path: 'news',component: news,},{path: 'system',component: system,},]},
];// 创建并导出路由实例
export const router = createRouter({history: createWebHashHistory(),routes,
});

注意history一定是要createWebHashHistory模式,也就是vue2里面的hash模式,也就是在链接后面加/#/这种

如果你用了createWebHistory也不是不可以,就是有点麻烦,需要在路由上面都加上仓库名字,首页默认是/,那么就要改成/vue3_viteapp,例如

const routes = [{ path: '/vue3_viteapp', component: index },{ path: '/vue3_viteapp/list', component: list ,children: [{path: 'news',component: news,},]},
];

还有用createWebHistory模式的话,部署到gitee中,切换到其他路由,再次刷新会报404,这个时候就得创建一个404.html,把打包后的index.html中的代码全部复制到404.html就可以了
所以如果没有特殊要求的话,就用createWebHashHistory模式,以免有上述这些麻烦

3.修改.gitignore文件,把里面的dist注释掉,也就是dist也要提交到gitee里面中,不清楚为什么的话就先继续往下看

4.执行打包脚本生成dist

5.初始化本地git仓库,git提交流程就不写了,提交到gitee后,如图所示

在这里插入图片描述
点击图上所圈出来的,再如图所示
在这里插入图片描述
部署分支,就是当前提交的分支,上面第三条有说到,为什么要把dist也提交上来,为的是在这个分支里面有dist目录,那么部署目录,就选择dist就ok,然后点击更新就会生成一个链接,访问这个链接就可以了,你会发现链接后面会默认有一个仓库的名字,只有加上仓库名字,gitee生成的链接才能访问到我们的项目

6.ok的了,差不多这些操作,就可以实现部署,如果有疑问的或者文章中有错误的,可以留下评论,如果有小伙伴挺急的话,就+q515773148,很快会收到,共同进步,欢迎来搞,感谢支持。

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

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

相关文章

【小呆的力学笔记】弹塑性力学的初步认知二:应力分析(1)

文章目录 1.1 一点的应力状态1.2 一点主应力状态1.3 应力偏张量、球张量、应力不变量 1.1 一点的应力状态 物体在受到外力或者自身不均匀的温度场等作用时,在其内部会产生内力,物体的内力与方向和截面都有关系。假设有一个受到外力作用的变形体&#xf…

Qt利用QAxObject和系统日期命令修改文件的修改时间和创建时间

#include <QApplication> #include <QAxObject> #include <QDebug> #include <QtCore> #include <stdlib.h>//思路&#xff1a; //1、利用windows的"date"和"time"命令&#xff0c;设置系统时间&#xff1b;注意&#xff1a…

ros2 学习04 工作空间说明及示例

ros2 术语说明&#xff1a; 大家在学习其他的开发语言之前的学习和开发中&#xff0c;应该有接触过某些集成开发环境&#xff0c;比如Visual Studio、Eclipse、Qt Creator等&#xff0c;当我们想要编写程序之前&#xff0c;都会在这些开发环境的工具栏中&#xff0c;点击一个“…

c语言力扣题目:消失的数字(有关时间复杂度O(N²)O(N))以及对异或操作符的更深入的理解(如何用人脑的十进制去考量二进制)

目录 Way One :暴力求解,时间复杂度为 O(N) 代码1 Way Two : 时间复杂度限制到 O(N) 代码及其详解 如题 Way One :暴力求解,时间复杂度为 O(N) 大体思路:比如这里我们需要处理的整型数组是"3,0,1",我们可以用冒泡排序或者 qsort函数将他从大到小进行排序成"…

SpringBlade export-user SQL 注入漏洞复现

0x01 产品简介 SpringBlade 是一个由商业级项目升级优化而来的 SpringCloud 分布式微服务架构、SpringBoot 单体式微服务架构并存的综合型项目。 0x02 漏洞概述 SpringBlade v3.2.0 及之前版本框架后台 export-user 路径存在安全漏洞,攻击者利用该漏洞可通过组件customSqlS…

手把手教你在 windows 上安装 Docker

前言 大家好&#xff0c;我是潇潇雨声&#xff0c;今天为大家带来一篇关于在 Windows 环境下使用 Docker 的教程。对于 Docker&#xff0c;我们可以简单地将其看作一种方便的软件安装方式&#xff0c;而无需深入涉及其复杂的概念。选择使用 Docker 主要是为了省事&#xff0c;比…

动态规划系列 | 一文搞定区间DP

文章目录 特点石子合并题目描述问题分析程序代码复杂度分析 环形石子合并题目描述问题分析程序代码复杂度分析 能量项链题目描述问题分析程序代码复杂度分析 加分二叉树题目描述问题分析程序代码复杂度分析 凸多边形的划分题目描述问题分析程序代码复杂度分析 棋盘分割题目描述…

STM32内部是怎么工作的

STM32是怎么工作的 1 从孩子他妈说起2 早期计算机的组成2.1 五大元件&#xff08;1&#xff09;第一个出场的是电容元件&#xff08;2&#xff09;第二个出场的是二极管&#xff08;3&#xff09;第三个出场的是电阻元件&#xff08;4&#xff09;第四个出场的是电感&#xff0…

现代雷达车载应用——第3章 MIMO雷达技术 3.1节 基于MIMO雷达的虚拟阵列合成

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 3 MIMO雷达技术 自20世纪90年代末以来&#xff0c;带有少量天线的汽车雷达已被用于高级驾驶员辅助系统(ADAS)的目的。这些早期的汽车雷达主要提供目标…

Flask学习四:补充

插件 flask-caching 简介 Flask-Caching 是一个 Flask 扩展&#xff0c;旨在为 Flask 应用程序添加缓存功能。缓存是一种提高应用性能的技术&#xff0c;通过将常用数据暂时存储在一个快速访问的位置&#xff08;如内存或磁盘&#xff09;&#xff0c;从而减少对较慢资源&…

HarmonyOS应用开发实战—开箱即用的活动创建页面【ArkTS】【鸿蒙专栏-33】

一.HarmonyOS应用开发实战—开箱即用的个人主页页面【ArkTS】【鸿蒙专栏-32】 1.1 项目背景 HarmonyOS(鸿蒙操作系统)是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统,旨在实现在各种设备之间的无缝协同和共享,包括智能手机、平板电脑、智能…

Android排队预约系统(Java+SqLite+ZXing)

自己写的排队预约系统&#xff0c;可改写&#xff0c;添加功能&#xff0c;如管理用户&#xff0c;查询排队人数等功能。(由于是选修课课设&#xff0c;所以写的比较粗糙) 使用方法&#xff1a; 1.使用Android studio导入项目。 2.使用gradle加载build.gradle.kts中的依赖。…

【MySQL工具】pt-online-schema-change 详细介绍

下面文章基于 pt-online-schema-change 3.5.5 版本 简介 pt-online-schema-change - 无锁表修改表结构工具&#xff0c;这里无锁表也不是绝对的&#xff0c;在交互原表与中间表 表名的时候也会有元数据锁&#xff0c;只不过事件很短 语法 pt-online-schema-change [OPTIONS…

计算BMI指数-第11届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第19讲。 计算BMI指数&…

Milvus实战:构建QA系统及推荐系统

Milvus简介 全民AI的时代已经在趋势之中&#xff0c;各类应用层出不穷&#xff0c;而想要构建一个完善的AI应用/系统&#xff0c;底层存储是不可缺少的一个组件。 与传统数据库或大数据存储不同的是&#xff0c;这种场景下则需要选择向量数据库&#xff0c;是专门用来存储和查…

智能优化算法应用:基于混沌博弈算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于混沌博弈算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于混沌博弈算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.混沌博弈算法4.实验参数设定5.算法结果6.…

新能源汽车厂商狂卷城区NOA的背后

出品 | 何玺 排版 | 叶媛 电气化的“上半场”基本收官后&#xff0c;新能源汽车领域的智能化“下半场”要怎么打&#xff1f; 对此&#xff0c;各大头部车企已经用一年来的实践给出了答案——以NOA&#xff08;领航辅助驾驶&#xff09;技术为核心&#xff0c;狂卷智驾体验。…

SQLturning:定位连续值范围起点和终点

在上一篇blog说到&#xff0c;如何去优化查询连续值范围&#xff0c;没看过的朋友&#xff0c;上篇blog链接[在此]。(https://blog.csdn.net/weixin_42575078/article/details/135067645?spm1001.2014.3001.5501) 那么今天来说说怎么将连续的数据合并&#xff0c;然后返回合并…

SpringSecurity入门

前言 Spring Security是一个用于在Java应用程序中提供身份验证和授权功能的强大框架。它构建在Spring框架之上&#xff0c;为开发人员提供了一套灵活且全面的安全性服务&#xff0c;本篇将为大家带来Spring Security的详细介绍及入门 一.安全框架 在学习了解Spring Security之…

vue3动态验证码

首先下载了vant4组件库&#xff0c;element-plus组件库&#xff0c;配置了路由&#xff0c;及接口的封装 element-plus组件库可全局配置&#xff1a;快速开始 | Element Plus vant4组件库&#xff0c;我是按需引入&#xff1a;Vant 4 - A lightweight, customizable Vue UI l…