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

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

相关文章
|
4天前
|
JavaScript
Vue3中路由跳转的语法
Vue3中路由跳转的语法
107 58
|
7天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
202 58
|
3天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
17 9
|
4天前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
|
5天前
|
JavaScript 开发者
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
5天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
2天前
|
JavaScript 调度
Vue3 使用 Event Bus
Vue3 使用 Event Bus
10 1
|
3天前
|
JavaScript
Vue3 : ref 与 reactive
Vue3 : ref 与 reactive
9 1
vue3 reactive数据更新,视图不更新问题
vue3 reactive数据更新,视图不更新问题