vue项目打包好后如何在gitee上预览展示(详细操作步骤)

最新推荐文章于 2024-06-12 13:40:55 发布
最新推荐文章于 2024-06-12 13:40:55 发布
阅读量3.5k 收藏 11
点赞数 1
文章标签： vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45432996/article/details/110779229
版权

我们的项目写好后，直接打包就可以看效果的，如果想在gitee上使用 https://wangye123456.gitee.io/crm这种个人的网站地址又该如何操作呢，下面我将慢慢介绍：

  1. 先在config文件夹下index.js找到assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了
  2. 执行npm run build命令
  3. 再看看是否打包成功：

在这里插入图片描述

  1. 将dist文件夹中的文件上传到你新建的仓库中,例如：

在这里插入图片描述

  1. 点击服务，可以看到有Gittee Pages,点击

在这里插入图片描述
在这里插入图片描述

  1. 再选中强制使用https，点击更新。

（如果你有其他分支也可以用其他分支）
输入页面中提示的网址，https://wangye123456.gitee.io/crm-management-system，即可看到自己的项目，如果你的index.html不在最外面一层则需要加上一层目录
在这里插入图片描述

喔烨鸭
关注
【项目实战】将 VuePress风格的博客部署到gitee page服务器上
本本本添哥
12-05 911
介绍VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。
将 Vue CLI 静态资源部署至gitee上的坑
weixin_43845044的博客
06-15 991
官方文档 写的非常好！！！照着做基本没问题！！！（至少我第一次用的时候没问题） 后来，我把项目重新改了改，也不知道是动到了哪~，打包以后，用serve -s dist本地查看dist就报了这几条错误。我寻思着前前后后，我改动过的配置，就是引入ant design vue的时候，在vue.config.js里添加了less loader的规则，难道~？算了，说正经的 报错原因如下： 在vue.config.js里，对publicPath进行了如下配置，在本地环境中，这个 JS 的路径是不存在的！但是在 G
在git上在线预览Vue项目
D_ylong的博客
10-16 396
1.在项目中运行 npm run build 进行打包生成dist文件夹 （注意：打包之后运行dist下index.html，如果什么都没有显示空白，是js，css引入路径错误，在路径前+“ . ”，即可解决问题） 2.运行 git init 让git接管该项目 3.运行git命令，将vue项目保存在git本地仓库中 git status //检测是否有更新 git add . git commit -m' 更新注释 ' （注意：将项目上传之后，会发现git自动跳过了dist文...
本地代码打包上传gitee
tuibianhuaisheng的博客
11-25 408
本地代码打包上传gitee 1.在gitee新建仓库 若选初始化仓库后续需要强制合并 2.在项目根目录下右键git bash 打开命令行 3.使用git init 命令将目录变成git可以管理的仓库 4.使用git add . 命令将文件添加到缓存区里面 5.git commit -m ‘系统名称’ 6.使用 git remote add origin +刚刚创建的远程仓库地址 将本地仓库与远程仓库绑定 7.使用git pull origin master 命令将刚刚创建的远程仓库与本地同步合并 有
git预览项目
weixin_30664051的博客
06-28 258
在HTML页面添加 http://htmlpreview.github.io/? 例http://htmlpreview.github.io/?https://raw.github.com/twbs/bootstrap/gh-pages/2.3.2/index.html 参考http://www.html580.com/11295 转载于:https://www.cnb...
用Gitee Pages服务在线预览vue3前端项目:静态网站+多级路由+history模式(踩坑)
weixin_44841138的博客
04-14 3492
vue打包成静态网站在gitee上预览，遇到的坑，以及解决这些坑的方法
vue3 ts webpack vue-cli3 打包本地线上预览 解决
jdjfjgfdgdfg的博客
04-20 879
vue3 ts webpack vue-cli3 打包本地线上预览 解决 npm run build 项目根目录下生成dist文件夹 全局安装：npm i http-server -g 进入dist文件夹目录下：cd dist 执行指令：http-server
将本机开发项目上传到Gitee库的操作演示及说明
灰灰老师
03-14 4138
说明：这里的add单词和.这个符号后面均有空格，.表示所有新增文件，如果只想提交单个文件，如：test.py，那么命令改为: git add test.py 即可.说明：这里的v1.0表示版本号，你可以写明确的提交信息，比如更新了什么内容等。到处表示我们已经将本地项目都已经上传到Gitee官方的代码托管仓库。①红色表示你的文件刚新增，还未提交到gitee规定的文件夹中去。注意：实例化成功以后本地的空文件中会多出来一个.git文件夹。②绿色表示已经将新增文件提交到gitee要求的文件夹中去了。
Vue移动端项目（一）
qq_48687155的博客
08-20 3236
Vue移动端项目
Vue2后台管理：项目开发全流程(二)
最新发布
唯见青山不见君
06-12 1545
Vue2后台管理：项目开发全流程(二)
vue 头条项目
i2270626407的博客
03-07 323
一、项目初始化 目标 能使用 Vue CLI 创建项目 了解 Vant 组件库的导入方式 掌握制作使用字体图标的方式 掌握如何在 Vue 项目中处理 REM 适配 理解 axios 请求模块的封装 #1、使用 Vue CLI 创建项目 如果你还没有安装 VueCLI，请执行下面的命令安装或是升级： npm install --global @vue/cli // 全局安装脚手架 1 在命令行中输入以下命令创建 Vue 项目： vue create toutiao-m
github 如何直接预览仓库中的html
AYXYJ
08-29 3326
github 上预览html有两种方式，我自己采取的方式一。我的项目地址：https://github.com/ayxyj/echarts 第一种：GitHub pages 的方式 GitHub Pages也有多种方式，可以参考官网 ：https://pages.github.com/ ，我这里讲解GitHub Pages的其中一种方式。 1、在github仓库中点击Settings，找到github pages 2、选择主题和分支 3、点击下图的红框中的地址，会进入下图的这个页面。 这个页面中，是展示项
在 gitee 码云部署预览静态站点项目（国内站点）
yzjandyyyYYDS的博客
03-09 887
个人实名认证需要上传身份证正反面和本人手持身份证正反面，提交验证后，需要等待。命令之后，等待上传完成，然后打开对应的。仓库，刷新页面，即可看到刚刚上传的代码。实名认证通过后，即可进行下面的操作。然后进入保存项目打包代码的。，登录帐号，创建新仓库。目录下，执行下面的命令。
在码云查看html预览,码云版本管理使用说明
weixin_33321740的博客
06-17 488
码云版本管理使用说明一.要建立码云云端版本库与本地版本库的联系需要先提供本机公钥给码云具体步骤：1.登陆码云2.设置3.SSH公钥4.在某个文件夹下用 Git Bash Here 打开命令行5.键入命令$ ssh-keygen --生成本机公钥敲回车若干下(直到又可以输入命令)$ cd ~/.ssh --跳转到公钥文件夹(如果显示找不到文件夹，请根据上条命...
在gitee上部署静态网站（或者个人博客）
热门推荐
zhangyu4863的博客
05-27 6万+
1.新建项目2.上传一个index.html的主页html文件3.生成静态网站点击Gitee Pages，进入如下界面点击启动服务，如下图如上的网站地址就是你博客的部署地址
github预览demo
weixin_30808253的博客
06-17 274
Github-README 中展示demo 2017年更新，现在github再master分支直接就可以操作，所以我改了这篇文章 问题所在？ 解决办法？ 博主建议？ 一：问题的所在 相信很多小胖友们在把自己的网页上传到github仓库中，都会有一个疑问？是什么呢？那就是上传完网页后，自己的仓库中是这个样子的 ，点进去相应的htm...
github预览html
weixin_47540149的博客
05-19 618
1.登入github 新建一个repo 第一步：创建仓库名称； 第二步：描述仓库（可以省略）； 第三步：点击绿色按钮创建仓库。 2.进入setting页面设置 第一步： 点击进入创建好的仓库； 第二步： 点击最右边的setting。 3.setting页面找到github pages 第一步：选择master分支； 第二步：点击save保存； 第三步：记下链接地址（xxx.github.io/yyy/）。 4.将要预览的html路径拼接在链接后面 xxx.github.io/yyy/zzz.html 自己的
github html5 预览,github 上如何直接预览仓库中的html
weixin_30601893的博客
06-20 676
前言：最近在写vue+element ui 的一些demo，就在github上建了个仓库来管理，但是希望能直接在github上就能预览效果，所以才有了这篇文章。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9346160.htmlgithub 上预览html有两种方式，我自己采取的方式一。我的项目地址：https://github.com/yuleGH/vu...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值