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),属性调用的方法而更改模式

相关推荐
独立开发者阿乐1 天前
Vue3中Markdown解析与渲染的完整解决方案:从安全到性能优化
web安全·性能优化·vue3·前端开发·语法高亮·markdown解析·markdown-it
Sapphire~2 天前
Vue3-10 ref与reactive创建响应式数据的区别
vue3
Irene19912 天前
Vue3 TypeScript 项目中,Emits 验证的使用场景
typescript·vue3·验证
箫笙默3 天前
Vue3基础笔记
笔记·vue·vue3
Sapphire~3 天前
Vue3-09 创建响应式数据(基本类型ref和对象类型reactive)
vue3
Sapphire~3 天前
Vue3-02 脚手架创建项目及文件解释作用
vue3
Cherry的跨界思维4 天前
28、AI测试环境搭建与全栈工具实战:从本地到云平台的完整指南
java·人工智能·vue3·ai测试·ai全栈·测试全栈·ai测试全栈
Cherry的跨界思维6 天前
【AI测试全栈:Vue核心】22、从零到一:Vue3+ECharts构建企业级AI测试可视化仪表盘项目实战
vue.js·人工智能·echarts·vue3·ai全栈·测试全栈·ai测试全栈
前端小L6 天前
专题三:完善响应式 —— readonly 与 isReactive
源码·vue3
神色自若6 天前
vue3 带tabs的后台管理系统,切换tab标签后,共用界面带参数缓存界面状态
前端·vue3