vite打包静态文件打开显示空白

weixin_37795155

已于 2023-03-31 10:24:48 修改

阅读量965

点赞数

文章标签： vue.js vue

于 2023-03-31 10:18:29 首次发布

本文链接：https://blog.csdn.net/weixin_37795155/article/details/129873169

版权

文章主要讨论了Vite打包后遇到的本地跨域和资源加载问题，以及在安卓设备上白屏的问题。针对这些问题，提供了参考解决方案，包括调整Vite配置以解决本地访问问题，使用@vitejs/plugin-legacy插件确保在低版本浏览器的兼容性。

摘要由CSDN通过智能技术生成

1、打包后，本地访问打包后的文件出现跨域以及资源找不到的问题可以参考vite打包静态文件打开显示空白进行配置修改

2、将打包文件部署服务器后在ios访问正常，但是在安卓访问页面白屏，需要为打包后的文件提供传统浏览器兼容性支持可参考如下链接vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)_vue.js_脚本之家

3、根据项目需要适配的浏览器版本也可以参考vite官网对 @vitejs/plugin-legacy 插件进行配置

插件文档链接github： vite/packages/plugin-legacy at main · vitejs/vite · GitHub

插件文档链接中文详解：vite plugin-legacy详解 - 知乎

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_37795155

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）

王佳斌

09-07

1万+

vue3 vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3 vite打包后双击本地运行，vue3 vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3 vite打包后如何本地查看网站，vue3 vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3 打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3

vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！

高级前端工程师

05-30

6294

vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue

参与评论您还未登录，请先登录后发表或查看评论

解决Vite+Vue3打包项目本地运行html白屏和报错问题

最新发布

BreenCL的博客

08-27

1293

解决Vite+Vue3打包项目本地运行html白屏和报错问题

记一次「 Vite打包后使用浏览器打开，显示空白问题」

qq_45735625的博客

05-14

1542

1.问题描述：在使用vite+vue3+Vant做前端页面时，本地运行测试没有问题，输入打包命令打包后直接点击index.html在页面访问空白。2.出现原因：vite 项目打包后预览需要有服务器的支持，直接用浏览器打开是不能访问的。除此之外，vite在package.json 中也有提供预览配置，预览会自动启用服务器。否则上线后可能还是会空白，并在控制台有如下报错信息。(1) 在项目文件夹全局安装serve;否则可能会出现页面空白，并报如下错误；(2) 在打包目录输入运行命令。直接输入运行命令即可。

使用vite打包的vue3 ，页面展示为空白

qq_54601164的博客

05-08

1145

vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置。vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…问题：通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；需要安装vite插件@vitejs/plugin-legacy。安装成功之后在vit.config.js引入并使用。起因：想看一下做的项目的静态版本。

Vue3+vite打包后页面空白问题

05-16

2278

二、vue3 vite打包后页面白屏控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist。1 安装兼容插件 @vitejs/plugin-legacy。原因：资源路劲问题修改：vite.config.ts。在vite.config.ts 中进行配置。然后到 dist目录下在cmd 中运行。想要查看，可以安装一个本地服务器插件。四、nginx.conf。

vite 打包页面空白

hero_th的博客

10-04

8584

根据vite 官网的打包配置教程这里需要着重强调一点问题 / 跟 ./ 这两个东西完全不是用一个路径 Solution 将 vite 里面的配置文件是 vite.config.js 在配置里写上 base: './' 即可解决。

vue打包后显示空白正确处理方法

08-28

例如，如果打包后的文件需要在本地文件系统中直接打开，而不是通过服务器提供，可能需要设置 `publicPath` 为 `./` 或者相对于当前 HTML 文件的相对路径，如 `../../`。 ```javascript module.exports = { ...

vite打包，tomcat访问index为空白页面

m0_37733303的博客

03-31

1698

现象：将vite打包后的dist里面的文件放在tomcat服务器下边运行,结果白屏找到vite官网,base参数默认是/,这是绝对路径，将其改成相对路径./ , base与plugins同级，不要放到server里，┮﹏┭ 再来一次结果还是白屏，F12查看控制台，看来是资源没有放对位置我用的springboot，静态资源默认放在static里，页面放在templates里，这三个文件不能放一块把assets和favicon.ico放在static下边，把index.html放在temp

vite打包 public文件访问

08-15

- *2* *3* [vite打包静态文件打开显示空白](https://blog.csdn.net/A_bet_of_three_years/article/details/128809633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...

Vue/Vite打包后空白以及部署到Gitee后空白解决方法

热门推荐

coderYYY的博客

10-23

1万+

Vue打包后页面空白解决办法在vue.config.js（）中添加以下代码（如果没有这个文件自己手动建一个） build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static',

Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec

qq_57229245的博客

03-13

2606

注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。

【vue3】vite.config.ts(js)打包部署后页面白屏

lwc18639470699的博客

03-08

1786

在使用 HTML5 history 模式时，需要确保服务器能正确地处理路由请求。具体来说，服务器需要配置将所有路由请求重定向到你的应用程序的入口文件，以确保在刷新页面或直接访问路由时能够正确加载应用程序。而使用 hash 模式则不需要特殊的服务器配置，因为 hash 模式的路由会被浏览器自动处理。如果服务器配置存在问题，建议使用 hash 模式或者调整服务器配置以支持 HTML5 history 模式。如果不想有#，就用history模式，那就需要服务器配置正确。可能会导致页面白屏的问题，而使用。

解决vite打包后，index页面空白，静态资源引入路径错误

like_a_diamond的博客

01-04

2466

使用vite打包时，静态资源加载败，本文为图片路径的写法，保证项目在生产环境及开发环境正常显示

vite打包vue3项目白屏报错

A88552211的博客

02-28

4078

vite打包vue3项目白屏解决方法

vite打包后线上环境打开白屏，控制台显示SyntaxError: Unexpected token ‘.‘问题

weixin_61570458的博客

01-23

1356

【代码】vite打包后线上环境打开白屏，控制台显示SyntaxError: Unexpected token ‘.‘问题。

解决vite打包后项目出现空白的问题

IM_GOOD的博客

04-02

4025

修改路由模式，我之前是用的History模式，结果有问题，把router中index文件改为Hash模式。因为我写的纯静态，到这里问题就已经能解决了。后面如果要写接口，又出现问题了，那再说吧。这是由于路径的问题，解决方案，vite.config.ts中加上路径都为相对路径。2. 页面还是空白，并且检查元素发现app节点中什么都没有，

vue3+vite+ts项目打包后打开dist文件夹中的index.html时页面一片空白

2301_78419762的博客

01-29

1917

vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置。vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；需要安装vite插件@vitejs/plugin-legacy。安装成功之后在vit.config.js引入并使用。想看一下做的项目的静态版本。

vite打包后直接打开html 空白

11-27

当使用 Vite 进行打包后，如果直接打开生成的 HTML 文件后出现空白页面，可能是由于以下几个原因： 1. 配置问题：检查 Vite 的配置文件（通常是 vite.config.js），确认是否正确配置了入口文件和输出路径。确保入口文件正确指向要打包的主要 JavaScript 文件，并且输出路径正确设置。 2. 缺少依赖：检查项目的依赖项是否完整，并且已经正确安装。使用 npm 或者 yarn 等包管理工具，检查 package.json 中的依赖项，并且运行相应的安装命令确保所有依赖都已成功安装。 3. 引入错误：检查 main.js（或其他主要 JavaScript 文件）中是否正确引入了其他模块或库。确保引入路径或包名拼写无误，并且文件位置正确。 4. 配置缓存：有时候在修改 Vite 配置文件后，缓存可能会导致构建过程出错。可以尝试清除缓存再重新执行打包命令。可以通过删除临时构建文件或清除 Vite 缓存的方式来解决这个问题。如果以上方法都无法解决问题，可以尝试在终端中运行打包命令，观察是否有报错信息输出，从而更进一步找到问题所在。此外，还可以参考 Vite 的官方文档、社区论坛或者issue页面寻求帮助，解决打包后空白页面的问题。