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

最新推荐文章于 2024-07-11 11:54:27 发布

呵呵哒

最新推荐文章于 2024-07-11 11:54:27 发布

阅读量1.2k

点赞数

分类专栏： vue3 vite 文章标签：前端 javascript 开发语言

本文链接：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 后的路径，上传后解决。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

呵呵哒

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3用vite打包上服务器后报错显示页面空白

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

扫一扫

专栏目录

vue3 解决getCurrentInstance 打包后线上环境报错问题

qq_35145095的博客

06-05

978

函数来获取当前组件实例，这在开发调试时非常方便，但是它在生产环境下可能会导致一些问题。因为 Vue 3 默认会在生产环境下使用渐进式编译 (progressive rendering)，这样可以减小项目代码体积和运行时资源的消耗。为了解决这个问题，我们需要修改 Webpack 的配置文件，指定 Vue 3 在生产环境中使用完整的编译模式，而不是仅使用渐进式编译。同时，我们在 Webpack 的配置文件中也开启了完整的编译模式，避免了在生产环境下使用渐进式编译所导致的问题。

Vue下路由History模式打包后页面空白的解决方法

08-27

主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

08-28

很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧

Vue3打包发布,刷新出现的空白页面和错误

最新发布

weixin_44600235的博客

07-11

750

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

1604

二、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

1799

1、npm run build 后把dist 文件夹中的文件传到云服务，跑起来是空白的。

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

qq_45735625的博客

05-14

1085

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

vue3打包后打开页面部分空白如何解决？

qq_20604185的博客

05-17

5788

我个人的原因是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.js框架开发的项目中，打包后的静态文件部署到生产环境中时，遇到了页面刷新后报错“Unexpected token <”的问题。这个问题表明在解析index.html或者发生错误的页面时，解析器遇到了一个不符合预期的字符...

vue项目打包后打开页面空白解决办法

08-27

Vue 项目打包后打开页面空白解决办法在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。一、路径问题在 Vue 项目中，index.html 文件中的内容都是通过 script ...

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

Achong999的博客

07-31

2041

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

Vue3项目(vben框架)打包时报错：JavaScript heap out of memory

一方湖泊

07-23

1612

我用的解决了问题，方法二中将内存设置为了16g，方法三中内存设置16g也就是。

VUE3打包build 报错

mocoll的博客

04-22

1471

解决方法打开package.json包将下面部分修改然后打包。

Vue3+Vite打包后上传服务器页面空白问题的解决

u010548345的博客

04-21

1100

经过排查发现，页面空白原因是因为所需的打包后的js和css文件的路径不对，可以通过在项目根目录下的的vue.config.js里增加一个“base”字段，配置成服务器访问的路径即可；

解决Vue打包后index.html页面无内容

m0_62681656的博客

06-16

551

创建 dist 文件2. 打开 index.html 后页面空白无内容发现路径少./

解决vue3项目打包发布到服务器后访问页面显示空白问题

m0_59006402的博客

12-01

2593

2.router里面的路由模式改为 createWebHashHistory。env.VITE_PUBLIC_PATH 的值如下。1.在 vite.config.ts 文件中加入。

[vite] 项目打包后页面空白,配置了base后也不生效

jinwenshuo2007的博客

08-16

3961

vite打包项目后页面空白,配置了base和history也没用的，看这里

vue项目使用vite打包后出现白屏并报错No match found for location with path

AzeShinja的博客

08-23

2844

createWebHistory导致的打包后页面空白

vue3在使用vite打包配置报错

03-30

如果您在使用 Vue3 和 Vite 打包时遇到了错误，可能是因为您的配置有误或者依赖包不兼容。以下是一些可能的解决方案： 1. 检查依赖包版本是否兼容 Vue3 和 Vite。 2. 确认 Vite 的配置文件是否正确设置了 Vue 插件。在 `vite.config.js` 文件中添加以下代码： ``` import { createVuePlugin } from 'vite-plugin-vue2' // 或者 import { createVuePlugin } from 'vite-plugin-vue3' export default { plugins: [ createVuePlugin(), ], } ``` 3. 确认 Vue3 的编译器是否已安装。在终端中运行以下命令： ``` npm install @vue/compiler-sfc --save-dev ``` 4. 如果您使用了 TypeScript，请确认 TypeScript 的配置文件是否正确。在 `tsconfig.json` 文件中添加以下代码： ``` { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": [ "esnext", "dom" ] } } ``` 5. 如果您的应用程序中使用了第三方库，请确认该库是否与 Vue3 兼容。如果不兼容，请尝试升级该库或使用其他库。如果您仍然无法解决问题，请尝试在 Vue3 和 Vite 的官方文档中查找相关信息，或者在社区中寻求帮助。