vue3打包后页面空白解决方法

最新推荐文章于 2024-05-20 10:06:54 发布
最新推荐文章于 2024-05-20 10:06:54 发布
阅读量946 收藏 8
点赞数 7
分类专栏： 前端 VUE 文章标签： vue.js vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76809965/article/details/135560835
版权
前端 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
VUE
10 篇文章 0 订阅
订阅专栏

vue3打包后页面空白解决方法

问题

最近写一个小项目
没有打包的时候一切正常

技术栈用的vue3 + vite
我用的是npm创建的项目

npm init vue@latest

问题一 ：打包后页面空白，什么都没有
在这里插入图片描述
问题二：刷新页面后找不到资源
把url的index.html去掉后可以正常显示但是刷新后又会出现新的问题
问题如下
在这里插入图片描述

解决方法

第一步
先在vite.config.js中添加一行代码

base:'/'

在这里插入图片描述

第二步
在router/index.js中把createWebHistory 换成createWebHashHistory
这里默认是createWebHistory
在这里插入图片描述
到此问题解决，打包测试应该没啥问题了！
在这里插入图片描述

yijianace
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目打包后打开页面空白解决办法
08-27
主要介绍了vue项目打包后打开空白解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
解决vue打包之后空白问题和路由问题
xiaoyao_zhy的博客
06-19 7101
1.打包之后打开dist之后页面空白出现该问题的大概率原因是打包之后，原先图片或者路由等的路径发生改变，在结合百度搜索之后找到的解决方法，希望能帮到你。解决方法 修改vue.config,js文件（修改成如下形式即可） 在这里如果出现model缺失一般提示的是node-polyfill-webpack-plugin缺失这里直接npm install node-polyfill-webpack-plugin --save即可2.路由无法使用解决方法将路由方式改为hash路由注意观察第一行导包导的包是cre
Vue3+vite打包后页面空白问题
IT菜鸟
03-01 1771
项目是放在根目录运行，使用默认配置 import.meta.env.BASE_URL 默认输出 '/'；vite.config.js 增加 base: './'如果项目打包后放在二级目录运行，例如：test/dist。nginx配置（项目放在二级目录时配置nginx）里面的【路由History模式打包页面空白】打包后 index.html。
vue3打包后部分页面空白
Shawn的个人博客
08-03 656
一、问题描述 在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。 二、问题解决 查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。 ...
vue 3.0用history路由打包后出现空白页面
weixin_43867229的博客
05-06 1237
vue 3.0用history路由打包后出现空白页面
vue3项目通过vite打包后，#app为空
FWarriorJnaos的博客
08-01 280
vue3项目通过vite打包后，#app为空
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
用vue实现json模版编辑器
qq_44428688的博客
05-14 530
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
vue+elementui省市联动选择
atregret的博客
05-17 189
看上面官方文档，最清晰。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
四天学会JS高阶（学好vue的关键）——深入面向对象（理论+实战）（第三天）
最新发布
爱游戏爱学习的博客
05-20 566
深入对象 原型对象
vue项目打包后页面空白
06-06
可能有多种原因导致打包后页面空白，以下是一些常见的解决方法： 1. 检查浏览器控制台是否有报错信息，如果有的话，根据报错信息进行排查。 2. 确认打包后的文件路径是否正确，特别是 index.html、JS 和 CSS 文件的引用路径是否正确。 3. 检查是否有未添加到依赖中的第三方库或插件，可能会导致打包后页面空白。 4. 确认是否正确设置了路由和组件，打包后的路由路径和组件名是否匹配。 5. 使用 Vue Devtools 插件进行调试，查看组件的状态和数据是否正常。 6. 尝试使用命令行工具运行打包后的文件，查看是否有报错信息，如果有的话，根据报错信息进行排查。 希望这些方法能对你解决问题有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yijianace

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值