vue3用vite打包上服务器后报错显示页面空白

最新推荐文章于 2024-07-11 11:54:27 发布
最新推荐文章于 2024-07-11 11:54:27 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue3 vite 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k490031/article/details/129733118
版权
vue3 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
vite
2 篇文章 0 订阅
订阅专栏
Vue3项目使用vite打包后部署到服务器出现页面空白，控制台显示JS、CSS等资源404错误。原因是打包后的文件路径与服务器路径不匹配。解决方法是在vite.config.js中正确配置base路径，确保文件能被服务器正确访问。
摘要由CSDN通过智能技术生成

vue3用vite打包上服务器后报错显示页面空白打开控制台显示js和css文件还有其他文件全是404

网上看了各种资料发现是打包后服务器的路径不一样

 导致文件没有请求到，

解决在 vite.config.js文件中

 配置 base 后的路径，上传后解决。

呵呵 哒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 解决getCurrentInstance 打包后线上环境报错问题
qq_35145095的博客
06-05 964
函数来获取当前组件实例，这在开发调试时非常方便，但是它在生产环境下可能会导致一些问题。因为 Vue 3 默认会在生产环境下使用渐进式编译 (progressive rendering)，这样可以减小项目代码体积和运行时资源的消耗。为了解决这个问题，我们需要修改 Webpack 的配置文件，指定 Vue 3 在生产环境中使用完整的编译模式，而不是仅使用渐进式编译。同时，我们在 Webpack 的配置文件中也开启了完整的编译模式，避免了在生产环境下使用渐进式编译所导致的问题。
Vue下路由History模式打包后页面空白的解决方法
08-27
Vue下路由History模式打包后页面空白的解决方法 在 Vue 项目中，默认的路由模式是 Hash 模式，但是这种模式会带来一些问题，如 URL 中的 "#" 符号不美观，微信分享、授权登录等功能也会出现一些问题。 History 模式...
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
vue3+ts+vite打包后静态资源404无法加载js和css
weixin_59855825的博客
02-20 3318
vite 打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath 的配置）在vite.config.ts中设置：base: "./"具体代码如下。问题1：访问的文件不存在，主要是因为路径配置问题。解决：在 vite.config.js文件中配置。访问的文件不存在，主要是因为路径配置问题。再次打包问题解决——
Vue3打包发布,刷新出现的空白页面和错误
最新发布
weixin_44600235的博客
07-11 646
Vue3打包发布出现的错误：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.
Vue3+vite打包后页面空白问题
05-16 1426
二、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。
Vue3打包发布后，页面运行起来空白
cwhzm的博客
07-10 1791
1、npm run build 后 把dist 文件夹中的文件传到 云服务，跑起来是空白的。
记一次「 Vite打包后使用浏览器打开，显示空白问题」
qq_45735625的博客
05-14 995
1.问题描述：在使用vite+vue3+Vant做前端页面时，本地运行测试没有问题，输入打包命令打包后直接点击index.html在页面访问空白。2.出现原因：vite 项目打包后预览需要有服务器的支持，直接用浏览器打开是不能访问的。除此之外，vite在package.json 中也有提供预览配置，预览会自动启用服务器。否则上线后可能还是会空白，并在控制台有如下报错信息。(1) 在项目文件夹全局安装serve;否则可能会出现页面空白，并报如下错误；(2) 在打包目录输入运行命令。直接输入运行命令即可。
vue3打包后打开页面部分空白如何解决？
qq_20604185的博客
05-17 5778
我个人的原因是router的history模式引起的。 做以下几点，问题解决。 1.修改vue.config.js const { defineConfig } = require('@vue/cli-service') //const path = require("path"); //const resolve = function(dir) { // return path.join(__dirname, dir); //}; module.exports = defineConfig({
基于Vue3+Vite的商品管理系统可视化页面源码.zip
08-21
基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品...
解决vue打包后刷新页面报错：Unexpected token <
10-16
主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。
vue项目打包后打开页面空白解决办法
08-27
Vue 项目打包后打开页面空白解决办法 在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script ...
vite vue3项目打包部署空白页面问题的处理
Achong999的博客
07-31 2014
总结：vite的特点: 快速的冷启动,不需要等待打包 即时的热模块更新 真正的按需编译,不用等待整个项目编译完成.2.查看我们的路由模式，将路由模式修改为createWebHashHistory。解决方法：1.在我们vite.config.js文件中检查是否有路径的指向。问题：vite vue3项目打包部署上线后，发现是空白页面问题的处理。
Vue3项目(vben框架)打包时报错：JavaScript heap out of memory
一方湖泊
07-23 1588
我用的解决了问题，方法二中将内存设置为了16g，方法三中内存设置16g也就是。
VUE3打包build 报错
mocoll的博客
04-22 1445
解决方法打开package.json包将下面部分修改然后打包。
Vue3+Vite打包后上传服务器页面空白问题的解决
u010548345的博客
04-21 1091
经过排查发现，页面空白原因是因为所需的打包后的js和css文件的路径不对，可以通过在项目根目录下的的vue.config.js里增加一个“base”字段，配置成服务器访问的路径即可；
解决Vue打包后index.html页面无内容
m0_62681656的博客
06-16 542
创建 dist 文件2. 打开 index.html 后页面空白无内容发现路径少./
解决vue3项目打包发布到服务器后访问页面显示空白问题
m0_59006402的博客
12-01 2548
2.router里面的路由模式改为 createWebHashHistory。env.VITE_PUBLIC_PATH 的值如下。1.在 vite.config.ts 文件中 加入。
[vite] 项目打包后页面空白,配置了base后也不生效
jinwenshuo2007的博客
08-16 3818
vite打包项目后页面空白,配置了base和history也没用的，看这里
vue3在使用vite打包配置报错
03-30
如果您在使用 Vue3 和 Vite 打包时遇到了错误，可能是因为您的配置有误或者依赖包不兼容。以下是一些可能的解决方案： 1. 检查依赖包版本是否兼容 Vue3 和 Vite。 2. 确认 Vite 的配置文件是否正确设置了 Vue 插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值