vue3 项目打包后白屏

根据Vue3.x文档,在 vue.config.js/vite.config.ts 统一对webpack、跨域、端口号等属性进行配置。

1.在 vue.config.js/vite.config.ts添加publicPath属性并将值更改成 './'

在这里插入图片描述

2.若还没有解决就去路由中将history模式设置成默认的Hash模式,

一般是服务器后端配置之后才使用history

一般建议默认的Hash模式

Vue2的路由与vue3的路由有些许不同,在Vue2中我们通过mode:'Hash'可以直接更改模式,而在Vue3中,我们通过更改history: createWebHashHistory(import.meta.env.BASE_URL)/history: createWebHistory(import.meta.env.BASE_URL),属性调用的方法而更改模式

相关推荐
RuoyiOffice11 小时前
Flowable 状态通知设计:单体用本地事件,微服务如何回写业务状态?
spring boot·微服务·vue3·flowable·ruoyi office·redis stream·流程状态通知
AI开源软件11 小时前
SpringBoot + Vue3 人力资源管理系统推荐:组织、档案与移动办公
vue3·springboot·ruoyi·oa系统·移动办公·人力资源管理系统·hrm
梅雅达编程笔记11 小时前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈
RuoyiOffice1 天前
项目预算和交付日期变了,为什么不能直接改台账?
spring boot·项目管理·vue3·flowable·业务建模·ruoyi office·项目变更
AI源码2 天前
图书馆借阅管理系统
vue3·springboot
RuoyiOffice2 天前
SpringBoot+Vue3 单据校验设计:保存草稿、提交审批、退回重填,各该检查什么?
spring boot·vue3·flowable·表单设计·ruoyi office·草稿保存·单据校验
RuoyiOffice4 天前
SpringBoot+Vue3 业财协同架构:预算、费用分摊、发票、往来与凭证怎样避免五套数字
spring boot·vue3·财务管理·spring boot 3·预算管理·ruoyi office·业财协同
RuoyiOffice5 天前
Vue3+TypeScript 企业管理平台统一UI:新增一个模块,为什么还要重新调样式?
spring boot·typescript·vue3·组件化开发·企业管理软件·ruoyi office·统一ui
Liu.7748 天前
Vue3 中如何使用 GET 请求传递复杂参数
vue.js·vue3
RuoyiOffice9 天前
Spring AI+Vue3 企业知识库设计:让每个答案有依据,让每份资料守住权限
java·spring boot·vue3·rag·企业知识库·spring ai·ruoyi office