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

8月前作者：yijianace 分类：Toy博客阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3打包后页面空白解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

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

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

npm init vue@latest

问题一：打包后页面空白，什么都没有
vue3打包后页面空白解决方法,前端,VUE,vue.js,vue,前端
问题二：刷新页面后找不到资源
把url的index.html去掉后可以正常显示但是刷新后又会出现新的问题
问题如下

解决方法

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

base:'/'

vue3打包后页面空白解决方法,前端,VUE,vue.js,vue,前端

第二步
在router/index.js中把createWebHistory 换成createWebHashHistory
这里默认是createWebHistory
vue3打包后页面空白解决方法,前端,VUE,vue.js,vue,前端
到此问题解决，打包测试应该没啥问题了！
文章来源地址https://www.toymoban.com/news/detail-792388.html

到了这里，关于vue3打包后页面空白解决方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Vue3 vite build 之后不显示页面内容，只显示空白，也没有报错如何解决

我的项目在 build 之后就插入到我的主网站的 /tools/image 路径下使用的，并非主网站，所以需要配置两个地方：添加 base，意思是 build 之后的外部资源都从当前目录的相对路径获取。比如 main.js 不是 /main.js 而是 ./main.js 我不知道是什么原理哈，反正是管用，之前在没有使用

2024年02月13日
浏览(48)
vue3 vite 打包二级目录刷新空白

控制台报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \\\"text/html\\\". Strict MIME type checking is enforced for module scripts per HTML spec. 打包路径问题，修改vite.config.ts文件的base

2024年02月09日
浏览(42)
vue项目打包后显示空白解决方案？

目录前言一、页面空白？二、图片加载不出来？总结 vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为\\\'./\\\'，如下：这里说一下，dev环境下 assetsPu

2024年02月16日
浏览(32)
vue打包完成后出现空白页原因及解决

资源路径不对路由模式：使用history，此模式上线后易出现404 1、vue.config.js中配置: 2、在后端要求做重定向如在nginx中使用rewrite做重定向

2024年02月04日
浏览(34)
Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案

前言顾名思义， chunk-vendors.js 是捆绑所有不是自己的模块，而是来自其他方的模块的捆绑包，它们称为第三方模块或供应商模块。通常，它意味着（仅和）来自项目 /node_modules 目录的所有模块，会将所有 /node_modules 中的第三方包打包到 chunk-vendors.js 中。将所有的第三方包集

2024年02月16日
浏览(38)
前端刷新页面的五种方法（含原生js、vue和react）

1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

2024年02月16日
浏览(37)
react、Vue打包直接运行index.html不空白方法

在根目录下创建 vue.config.js 文件，写入

2024年01月21日
浏览(30)
vue3+elment复杂详情页面打开后，再打开其他页面都显示空白，控制台也没什么特殊报错

页面使用了el-tabs 、 el-tab-pane、el-table 等标签但是经测试不是这些问题导致的 js也使用了onMounted ，但是除掉也时空白页面反正之前人写的页面可乱，尤其是js这块，穿插引用import一大堆主题页面样式布局如下最后看到页面代码太乱，就动了下页面布局代码，js也归类调整了

2024年04月14日
浏览(29)
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误；关于vite build后访问报错关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “

一.vite.config.ts配置：主要的就是base: env.VITE_MODE === \\\'production\\\' ? \\\'./\\\' : \\\'/\\\', 二. 打包后的结果如图所示，文件路径是 ./ 其实去掉./ 也是可以的，但是打包后是 /favicon.ico 这种路径是访问不到的，参考第一部分三. 配置路由：路由改成 createWebHashHistory 四. vscode安装Live Server

2024年02月11日
浏览(43)
Vue路由模式（history模式刷新页面空白解决方案）

vue路由的三种模式 Hash模式、 History模式、 abstract 模式 Vue3: Hash 模式是用 createWebHashHistory() 创建的： Vue2 它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有

2024年02月12日
浏览(48)