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

最新推荐文章于 2024-05-16 16:51:03 发布
最新推荐文章于 2024-05-16 16:51:03 发布
阅读量1.4k 收藏 12
点赞数 9
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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引入并使用

踏入两次河流
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite vue3项目打包部署空白页面问题的处理
Achong999的博客
07-31 1929
总结：vite的特点: 快速的冷启动,不需要等待打包 即时的热模块更新 真正的按需编译,不用等待整个项目编译完成.2.查看我们的路由模式，将路由模式修改为createWebHashHistory。解决方法：1.在我们vite.config.js文件中检查是否有路径的指向。问题：vite vue3项目打包部署上线后，发现是空白页面问题的处理。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vue3+vite打包后页面空白问题
最新发布
05-16 853
二、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打包的vue3 ，页面展示为空白
qq_54601164的博客
05-08 563
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打包后index.html空白
YJH15888673903的博客
01-13 773
找到vite.config.js文件（没有就自己创建一个）里面加上 base: "./",然后用打开。
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误；关于vite build后访问报错
热门推荐
qq_44535402的博客
07-20 1万+
关于Vite打包后本地访问打包文件空白页面 ；关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
Vue3 + Vite 页面白屏问题（开发环境+生产环境）
Yana's Blog
05-06 7516
在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。
vite打包vue3项目白屏报错
A88552211的博客
02-28 3924
vite打包vue3项目白屏解决方法
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+vite+ts+antv/x6搭建的流程图编辑页面
03-26
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图...
Vue3+Vite4+TS 后台模板
06-08
在Vue3+Vite4+TS的后台模板中，TypeScript的使用让项目的结构更加清晰，代码更具可预测性，有助于团队协作和长期维护。 该模板可能包含了以下核心组件和功能： 1. 登录/注册页面：通常会使用Vue Router进行路由...
Vue3+Vite打包后上传服务器页面空白问题的解决
u010548345的博客
04-21 1046
经过排查发现，页面空白原因是因为所需的打包后的js和css文件的路径不对，可以通过在项目根目录下的的vue.config.js里增加一个“base”字段，配置成服务器访问的路径即可；
vue3打包后页面空白解决方法
.
01-12 1334
vue3项目打包后页面空白解决方法
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',
vue3+vite本地打包后index空白页
qzh88888888的博客
10-07 391
1.安装@vitejs/plugin-legacy 并引入。2.配置base build。
vue项目npm run build打包dist文件及打包后空白的解决方法
qq_52126119的博客
11-15 1万+
要想将vue的移动端项目打包成手机的app软件apk格式，首先要将项目打包出dist文件。若空白查看一下配置，可能是配置有错误，（本人用的情况一配置空白，换成了情况二的配置，成功解决！！）
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 应用程序的基本步骤。根据自己的实际需求，可以进行一些额外的配置和修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值