Vite构建的Vue3项目打包部署到Gitee —— 全网最详细系列

简介: Vite构建的Vue3项目打包部署到Gitee —— 全网最详细系列
最近利用Vite构建Vue3写了一个简单的ToDoList,想要部署到Gitee,并开启 Gitee Pages服务时出现页面空白的问题,参考了很多博客,尝试了很多办法都没有解决,正愁眉不展时我点开了 Vite的官方文档,好家伙,直接茅塞顿开,原本这么小的一个问题被我想的太复杂了,还浪费了那么多时间,哎,此刻记录下我的解决办法,希望能帮到跟我有同样问题的人。

Vite部署静态站点官方文档

一、本地打包测试

构建应用(打包)

npm run build

默认情况下,构建会输出到 dist 文件夹中。

本地测试应用

当你构建完成应用后,你可以通过运行 npm run preview 命令,在本地测试该应用,利用好控制台,找BUG修BUG。

  • 每次修改代码后要先build构建打包再preview本地测试才能显示出修改代码后最新的效果
vite preview 命令会在本地启动一个静态 Web 服务器,将 dist 文件夹运行在 http://localhost:5000。这样在本地环境下查看该构建产物是否正常可用就方便了。

==这一点非常重要,可以在本地测试应用,当本地测试没问题后再推到仓库开启 Gitee Pages服务即可,不需要频繁推到仓库更新Gitee Pages测试了==

我遇到的问题

我在本地测试的时候还是显示页面空白,打开控制台发现报了:
TypeError: Cannot read properties of undefined (reading '$store')
回到代码发现是我在使用Vuex的数据时按照往常习惯在前面加了this,我把this去掉重新npm run build打包,再打开npm run preview本地测试,错误就没了,页面也正常显示了。

  • 修改前:

在这里插入图片描述

  • 修改后:

在这里插入图片描述

二、配置Gitee Pages

在 vite.config.js 中设置正确的 base。

如果你要部署在 https://<USERNAME>.gitee.io/
你可以省略 base 使其默认为 '/' 即: base:'/'

如果你要部署在 https://<USERNAME>.gitee.io/<REPO>/
例如你的仓库地址为 https://gitee.com/<USERNAME>/<REPO>
那么请设置 base 为 '/<REPO>/' 即:base:'/<REPO>/'

例如:我的仓库地址为:https://gitee.com/ailjx/todolist,我生成的Gitee Pages 为: http://ailjx.gitee.io/todolist则我需要如下配置:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    base:'/todolist/'
})

==注意:base里前后各有一个/,省略一个都不行!==

修改路由

设置完base后,项目的地址后面就会自动加上base里配置的内容,所以要修改下路由。
在这里插入图片描述

例如:

  • 我的项目==首页==原路由为:

    {
       path: '/',
       name: 'todolist',
       title: 'todolist',
       component:  () => import('@/components/A.vue')
    }
  • 修改后的路由:
{
    path: '/todolist',
    name: 'todolist',
    title: 'todolist',
    component:  () => import('@/components/A.vue')
}

三、Gitee部署

修改.gitignore文件

如果打包后直接push到Gitee仓库会发现仓库里没有dist打包文件夹
这时需要将项目里的.gitignore文件里的dist删除或者注释掉
如:在这里插入图片描述

.gitignore文件可以理解为管理Git内容的一个文件,具体可见
vue项目打包后提交到git上为什么没有dist这个文件?

修改README.md文件(推荐)

README.md文件里的内容即是对项目的一个介绍内容,推到Gitee仓库后会在仓库底部显示,为了让人们了解你的项目,并让自己养成良好的习惯,推荐自行修改下README.md文件。
在这里插入图片描述

开启Gitee Pages 服务

在这里插入图片描述

推荐将部署目录改为dist,而不是部署整个仓库!

在这里插入图片描述

最后附上我的仓库地址:https://gitee.com/ailjx/todolist,期待你的Star

如果这篇文章帮到了你还请给个点赞、评论、收藏,一键三连!

相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
164 64
|
1天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
11 1
|
1天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
14 1
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
143 60
|
28天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
111 3
|
2月前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
86 17
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
101 17
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
59 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
53 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
58 1