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

最新推荐文章于 2024-07-23 15:45:06 发布

踏入两次河流

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量1.6k

点赞数 11

文章标签： vue.js

本文链接：https://blog.csdn.net/2301_78419762/article/details/135915303

版权

起因：想看一下做的项目的静态版本

问题：通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；

解决方案：

1、文件路径不对

vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置

2、跨域问题

vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…没有跨域的定义
需要安装vite插件@vitejs/plugin-legacy

npm i @vitejs/plugin-legacy -D

安装成功之后在vit.config.js引入并使用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

踏入两次河流

关注关注

11
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
vue3+vite+ts项目打包后打开dist文件夹中的index.html时页面一片空白

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

高级前端工程师

05-30

4961

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

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化

05-12

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

vue3+vite+ts项目直接打开dist中index.html（页面空白问题）

flhhly的博客

06-25

1633

本地直接打开dist中index.html

vite vue3项目打包部署空白页面问题的处理

Achong999的博客

07-31

1976

总结：vite的特点: 快速的冷启动,不需要等待打包即时的热模块更新真正的按需编译,不用等待整个项目编译完成.2.查看我们的路由模式，将路由模式修改为createWebHashHistory。解决方法：1.在我们vite.config.js文件中检查是否有路径的指向。问题：vite vue3项目打包部署上线后，发现是空白页面问题的处理。

vue3+vite+移动端webview打包后页面加载空白问题解决办法

云加速

07-13

116

在使用Vue3、Vite以及移动端Webview进行开发时，打包后页面加载出现空白的问题可能是由于多种原因造成的。通过上述方法，你可以尝试解决Vue3、Vite以及移动端Webview打包后页面加载空白的问题。确保Webview的配置正确，没有阻止JavaScript的执行或资源的加载。属性，以正确设置基础路径，使得构建后的资源能够从正确的相对路径加载。如果资源是从不同的域加载的，确保服务器配置了正确的CORS策略。确保打包后的资源文件没有损坏，并且所有依赖都已正确加载。在所有环境中都是可用的。

【Vue3+Vite】解决build后空白页的问题

提笔忘字的帝国

11-27

906

build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个 404 错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。

vue3+vite2+ts+vant3 项目demo

04-16

此项目按照大佬文章一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬

Vue3+Pinia+Vite+TS 还原高性能外卖APP项目完结10章

01-15

大家好，今天我将带着大家用Vue3+Pinia+Vite+TS来开发一款外卖app的项目，喜欢大家会喜欢。随着外卖服务的普及和数字化的兴起，外卖系统的开发变得至关重要。要构建一个高效、安全、用户友好的外卖系统，需要运用...

Vue3+Vite4+TS 后台模板

06-08

在Vue3+Vite4+TS的后台模板中，TypeScript的使用让项目的结构更加清晰，代码更具可预测性，有助于团队协作和长期维护。该模板可能包含了以下核心组件和功能： 1. 登录/注册页面：通常会使用Vue Router进行路由...

vue3+vite+ts+antv/x6搭建的流程图编辑页面

03-26

这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图...

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

01-12

1473

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

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

IT菜鸟

03-01

3163

项目是放在根目录运行，使用默认配置 import.meta.env.BASE_URL 默认输出 '/'；vite.config.js 增加 base: './'如果项目打包后放在二级目录运行，例如：test/dist。nginx配置（项目放在二级目录时配置nginx）里面的【路由History模式打包页面空白】打包后 index.html。

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

qq_54601164的博客

05-08

682

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.config.ts(js)打包部署后页面白屏

lwc18639470699的博客

03-08

1360

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

Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误

最新发布

Humbunklung的专栏

07-23

345

Python Formulas库，JSON格式导出导入。

Vue使用FullCalendar实现日历/周历/月历

_小郑有点困了的博客

07-23

310

需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。

VUE 子组件可以直接改变父组件的数据吗

Cshaosun的博客

07-23

308

如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。

vite+vue3+ts 的项目增加electron打包成exe

05-19

将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序需要进行以下步骤： 1. 安装 Electron：使用 npm 安装 Electron，可以通过以下命令进行安装： ``` npm install electron --save-dev ``` 2. 创建主进程文件：在根目录下创建一个名为 `electron.js` 的文件，并在其中编写 Electron 的主进程代码。 3. 修改 `package.json` 文件：将 `main` 属性的值设置为 `electron.js` 文件的路径，如下所示： ``` { "name": "your-app", "version": "0.0.1", "main": "electron.js", ... } ``` 4. 构建应用程序：在命令行中运行以下命令，将 Vite + Vue3 + TypeScript 项目构建成可在 Electron 中运行的应用程序。 ``` npm run build ``` 5. 打包应用程序：使用 Electron Builder 打包应用程序，可以使用以下命令进行安装： ``` npm install electron-builder --save-dev ``` 然后，在 `package.json` 文件中添加以下代码： ``` { "build": { "appId": "your.app.id", "productName": "Your App Name", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "electron.js", "node_modules/**/*" ], "extraFiles": [ "assets/**/*" ], "mac": { "category": "your.app.category.type" }, "win": { "target": "nsis" } } } ``` 6. 打包应用程序：在命令行中运行以下命令，将 Vite + Vue3 + TypeScript 项目打包成可执行文件。 ``` npm run electron:build ``` 以上步骤是将 Vite + Vue3 + TypeScript 项目打包成 Electron 应用程序的基本步骤。根据自己的实际需求，可以进行一些额外的配置和修改。