教你将静态页面(包含vue等SPA项目)部署到码云并展示

最新推荐文章于 2024-05-27 21:03:40 发布
原创 最新推荐文章于 2024-05-27 21:03:40 发布 · 746 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细介绍如何在Gitee上部署Vue项目，包括创建公开仓库、上传打包后的index.html文件、配置仓库名称及使用GiteePages服务进行部署的步骤。
亲测有效：
项目地址：http://sirfuao.gitee.io/vue_dingdong
第一步：

第一步 当然是先创建一个 个人的公开仓库了,注意 是公开仓库在这里插入图片描述

第二步：

第二步 当然是把自己的index.html页面上传到仓库了(SPA应用需要上传打包后的文件)
在这里插入图片描述
这里注意 仓库的名字 将来会是访问你静态页的一部分,所有打包的时候,注意在webpack配置中添加你的仓库名字
比如 我的名字叫vue_dingdong 则我的webpack配置中是这样的:
在这里插入图片描述

第三步：

点击 服务 => Gitee Pages
在这里插入图片描述

第四步：

选择 分支(一般为主分支) 点击 开启,等待部署完成即可
在这里插入图片描述

使用码云部署Vue静态页面
TechBurst的博客
09-28 350
首先，创建一个码云仓库并将你的Vue项目推送到仓库。然后，配置码云Pages服务，以便自动构建和部署你的静态页面。最后，你就可以通过访问部署的页面链接来查看和使用你的Vue应用程序了。将你的Vue项目推送到刚刚创建的码云仓库。在上面的示例中，我们创建了一个简单的Vue应用程序，并将其保存为index.html文件。码云提供了一个名为Pages的服务，可以将仓库中的静态页面自动部署到云端。下面是一个简单的Vue应用程序示例，用于演示部署到码云Pages的过程。步骤2：将Vue项目推送到码云仓库。
vue项目部署到码云上面
TZ1284063988的博客
02-03 648
1.首先码云创建一个私有仓库 不要初始化 2.将打包好的vue dist放进一个空的文件夹里 3.在本文件夹下打开控制台执行如下命令（最后输入码云的账号密码；） 复制dist文件夹到另外新建文件夹中，cd进dist文件夹，运行git命令行 git init git add -A git commit -m '提交信息' git remote add origin 远程仓库地址 git push -u origin master 4.点击码云仓库里的服务----开始部署服务
vue项目部署到码云的pages服务器上
01-07
1.码云上创建远程仓库 2.vue项目跟目录设置vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/远程仓库名字/' : '/' } 3.打包及上传远程仓库 npm run build 复制dist文件夹到另外新建文件夹中，cd进dist文件夹，运行git命令行 git init git add -A git commit -m '提交信息' git remote add origin 远程仓库地址 git push -u origin mas
Ubuntu配置Nginx部署Vue SPA项目
光
11-22 2002
Nginx 网页服务器。默认配置即支持systemd服务（守护进程）。 守护进程可见上一篇博客： linux二探 # ubuntu 平台安装（默认启动） $ sudo apt install nginx # 查看服务状态 $ sudo systemctl status nginx # 启动 $ nginx # 退出 $ nginx stop # 修改配置后重启 $ nginx -s reload # 可以配合 ps -ax | grep nginx 来查看当前 Nginx 使用的端口 # ps是 P
vue dist包部署到码云Page服务
代码随想录
06-22 907
实在不想买服务器，于是打算把vue项目部署到码云的Page服务上试试，但是默认配置部署到码云上静态文件回404无法访问 故需配置webpack 部署前提 前端必须接入线上的后台服务api 配置webpack(仅适用于vue-cli3以上) 根目录新建vue.config.js module.exports = { // 这里是脚手架的配置, // 其中如果想修改 webpack 配置 publicPath:'./', configureWebpac...
使用vue-cli搭建SPA项目
byg
08-06 1097
什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx a、：xxx 为自己创建项目的名称 b、：必须先安装vue,vue-cli，webpack，node等一些必要的环境 安装vue-cli npm install -g vue-cli 一：安装成功后，会出现如下文件 D:\in...
VuePress的博客搭建并自动部署页面到码云（Gitee）
学而时习之，不亦说乎。
07-19 1831
一、VuePress 简介 VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。 每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。 二、快速搭建
基于Vue的电商后台管理系统前端项目
项目结构中包含的“vue_shop”文件夹应为项目的根目录，内部通常包括`src`源码目录、`public`公共资源目录、`node_modules`依赖库、配置文件如`vue.config.js`、`package.json`等标准Vue CLI脚手架生成的结构。...
快速创建vuepress项目-使用vuepress+Markdown写文档并发布为网站
zoomlaziti的博客
04-27 970
搭建一个vuepress项目 项目初始化 安装配置VuePress 编写文档 接下来你还可以配置各类主题 终极发布 vuepress的官方文档：https://vuepress.vuejs.org/zh/guide/ 参考：https://segmentfault.com/a/1190000016333850 https://juejin.im/post/5d1f1136...
清栀记账App-Vue版开源项目及演示
- 部署记账应用可能需要将构建后的静态文件上传到Web服务器或使用静态网站托管服务。 9. 数据管理： - 由于是记账应用，项目需要考虑数据的持久化问题。可能使用了某种形式的数据库存储（例如localStorage、Vuex...
基于Vue和Nuxt的在线教育网站开源项目
综上所述，该在线教育网站项目不仅展示了Vue+Nuxt技术栈在实际项目中的综合运用，还涵盖了用户系统设计、多版本产品规划、Git协作流程、代码版本管理、开源社区运营等多个维度的知识点，是一个集技术深度与工程广度...
vue项目,代码提交至码云,iconfont的用法说明
10-15
主要介绍了vue项目,代码提交至码云,iconfont的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
直接使用的vue.js
03-05
vue.js,可以直接下载引用至项目目录，引用至html页面进行样式的加载使用
Vue中SPA搭建
chiyangj的博客
08-22 399
SPA搭建使用Vue-cli来搭建Vue项目安装Vue-cli使用脚手架Vue-cli来构建项目端口的修改 使用Vue-cli来搭建Vue项目 1.什么是vue-cli vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境 安装Vue-cli 1.进入安装Node.js的node_global文件，复制全路径，
vue前端一个简单的静态页面
最新发布
2303_76992412的博客
05-27 5259
Vue.js是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue的设计注重灵活性和“可以被逐步集成”的特点，可以用于构建简单的静态页面到复杂的单页应用程序。Vue的核心功能包括声明式渲染和响应性，它能够自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。此外，Vue支持单文件组件，允许开发者将组件的逻辑、模板和样式封装在同一个文件中，便于管理和复用。
将本地项目上传到码云上（vue项目）
JessicaLi的博客
07-11 2052
其实对于git的操作真的不是很熟悉的，但是我们用码云的时候，可以看看码云的教程 一、比如说提交项目到码云 https://gitee.com/help/articles/4122 这是码云的教程，估计一般都能看懂 方法1 安装git 新建一个项目https://gitee.com/help/articles/4120 先将项目clone到本地，修改后再push到码云的项目仓库 $ g...
vue安装以及使用和gitee码云的部署注册配置公钥
。
06-01 364
**参考教程传送门：**https://blog.csdn.net/xwyjw/article/details/107484443 自定义项目基础配置：
vue2项目部署到码云（gitee/pages）的操作步骤
icon_font的博客
07-28 2597
vue项目部署到gitee的pages
Vue 项目部署时静态资源找不到的解决方法
在 Vue 项目中，使用 Vue CLI 搭建的项目，在本地测试和调试都没有问题，但是在服务器上部署时，静态资源找不到，这个问题是怎么回事？今天，我们将探索这个问题的解决方法。 首先，让我们来了解一下问题的背景。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值