Vue打包后，打开项目出现项目白屏情况

最新推荐文章于 2024-05-30 11:08:35 发布
最新推荐文章于 2024-05-30 11:08:35 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： Vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44849271/article/details/119776501
版权

Vue打包后的项目白屏

使用npm run build打包Vue项目后，项目白屏

在dist文件夹打开index.html
在这里插入图片描述

这个问题一般来说是打包后，项目文件路径对不上

解决方案：
在根目录(跟src文件夹同级别)下添加vue.config.js文件。

在vue.config.js文件中添加module.exports={publicPath:’./’}代码
在这里插入图片描述
最后重新打包

在这里插入图片描述

I'm Mr.C
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue导致页面白屏几种情况
weixin_46113016的博客
06-06 7239
1.vue项目打包后，在非首次线上替换dist文件时，某些手机/浏览器在之后首次打开页面，可能出现白屏情况。 原因：在使用vue-cli脚手架构建完项目，项目完成后，需打包上线。默认打包方式则是 npm build，然后项目根目录会生成 dist 文件夹。服务端将该文件夹替换线上即可。但是当第n（n>1）次上线后，由于在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。 优化方案： 1）
详解vue 项目白屏解决方案
10-17
主要介绍了详解vue 项目白屏解决方案，详细的介绍了白屏的解决方案，非常具有实用价值，需要的朋友可以参考下
Vue首屏白屏如何解决
最新发布
youhebuke225的博客
05-30 775
通过结合以上解决方案，可以有效地解决Vue首屏白屏问题，并提升用户体验。在实际开发中，应根据项目的具体情况和需求，选择合适的解决方案进行优化。二、文件引用和打包问题。三、浏览器兼容性问题。四、异步数据请求问题。
Vue项目启动白屏问题
CJB2020818的博客
03-20 9750
首先，如果项目能够启动，且控制台没有报错，那么首先去排除路由问题。先看一下主要的文件配置：main.js控制台没有报错，但是项目页面空白。
vue打包好的项目运行出现白屏
susan的博客
11-01 427
vue项目打包好的网页——访问页面出现白屏解决办法记录
vue 项目白屏解决方案
weixin_33831673的博客
10-30 1939
在做的项目是使用 vue-cli 脚手架为基础的，只能使用微信浏览器打开的。在某次更新功能代码后，被反馈在一些手机上会出现白屏。经过一番探索，多管齐下解决了问题 白屏可能的原因： es6 代码没有被编译成 es5 ； 文件打包路径错误； 运营商塞入的广告 js 服务器报错，连累项目不能下载资源； 针对 1 和 2 ，分别采取以下做法...
Vue打包部署时踩的坑(白屏404问题) 只针对vue 2.0
阿权的博客
07-25 216
搞得我头疼啦半个小时,哎 打包时把config目录下index.js中 assetsPublicPath中的/改为./
vue项目打包后打开页面空白解决办法
08-27
在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script 标签引入的，因此路径的问题是导致页面为...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
通过上述步骤，我们可以确保Vue项目在Spring Boot环境中部署时，无论是首次加载还是刷新浏览器，都能正确加载静态资源，避免出现页面空白和404错误。请注意，每个项目的具体配置可能因环境而异，因此在实际操作中，...
关于vue-cli3打包代码后白屏的解决方案
01-19
最近使用了vue-cli3.0 开发了一个移动网页端项目，准备打包发布了。按照以往的流程 npm run build 问题来了 打开 dist index.html 文件发现白屏。打开调试后 发现文件引用路径不对 根据以往的经验 根目录下新建 vue....
Vue打包部署出现白屏
Shawn的个人博客
07-04 5632
1、问题描述  我们用vue项目在本地跑的时候一切正常，当时我们用npm run build命令打包并部署服务器后，发现Index展示的是白屏，控制台显示资源都能正确访问到 2、原因  出现这个问题的原因就是Vue路由模式的设置问题，首先简单介绍一下Vue的两种路由模式：hash模式和history模式  这两个模式最直观的区别就是在url中 hash 模式带了一个很丑的 # 而history是没有#的，在一般开发环境下，这两个模式都是可以正常使用的，但是打包编译的时候这两个模式有些地方需要进行修改才能防止
vue在低版本的iOS下出现白屏现象解决方案
weixin_34082789的博客
04-09 2239
使用vue-cli脚手架搭建的项目时，在build之后发布到线上环境，低版本的iOS（测试过iOS 9.x）出现白屏；经测试是由于source-map引起的；所以在config文件夹下找到index.js，进行如下操作即可规避这个问题；productionSourceMap: false, // https://webpack.js.org/configuration/devtool/#produ...
vue build打包之后首页白屏的问题
热门推荐
Lee的博客
12-23 1万+
问题描述 本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 1.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子。 2.在build文件夹中打开webpack.prod.conf.js 找到output：增加...
vue项目通过HBuilderX打包成app出现白屏
Noctis99的博客
09-08 2567
v
【已解决】使用vue打包后查看打包好的出现白屏——vue2.x打包之后出现白屏
木得是的博客
05-22 1248
今天打包项目完之后，打开index.html去看看有没有什么发题，一打开奇怪的事发生了，居然是空白 如图 打开控制台之后，如图 百度了半天发现是文件引入的路径出问题了，于是我将打包之后的index.html中的各种引入的都修改了路径，错误是没有了，但是页面还是空白，然后还是各种查找~~~~ 最后皇天不负有心人，终于解决了，下面就是解决的办法，希望能给各位带来帮助， 在项目根目录下新建文件vue.config.js（与src在同一目录），并配置如下： module.exports = { // 修
Vue项目里白屏问题解决方案
etemal_bright的博客
05-26 1519
https://www.jianshu.com/p/7ef0ac0e972b
vue在低版本android上,vue项目在安卓低版本机显示空白的原因分析(两种)
weixin_32865081的博客
05-26 729
vue项目在安卓低版本机显示空白原因：可能的原因一查看安卓debug，报错，可能有箭头函数语法错误，或者其他语法问题，那可能是ES6语法问题。这时候需要安装babel-pollyfill。网上找到方法如下：1.安装babel-polyfill和es6-promise2.main.js引入3.webpack.base.conf.js这时如果安卓机依然空白打不开，继续查看原因二可能的原因二：查看npm...
vue框架开发出现白屏的解决方法汇总
weixin_30498921的博客
05-19 120
利用vue框架写一个简单的新闻客户端，修改了部分配置重启项目后发现又白屏的情况。特此做个简单的汇总。 1.npm run build打包页面空白 发现页面head中引用的js和css文件是出现了路径错误，这里修改如下： 解决位置：config/index.js文件：把assetsPublicPath: '/'改为assetsPublicPath: './' 2. iOS的Sa...
vue3 vite项目打包后预览白屏
07-28
这个问题可能由多种原因引起。以下是一些可能的解决方案： 1. 确保你在打包前进行了正确的配置。在 Vue 3 中，你可以使用 Vite 构建工具进行项目打包。确保你已经正确配置了 `vite.config.js` 文件，特别是 `base` 属性，以确保你的项目在预览时能够正确加载资源。 2. 检查浏览器控制台报错信息。打开浏览器的开发者工具，切换到控制台选项卡，查看是否有任何错误信息。这些错误可能会指引你找到问题所在。 3. 确保你的代码没有依赖于开发服务器。在开发过程中，Vite 提供了一个开发服务器来实时编译和热更新你的代码。但是在打包后，这个服务器不再存在，所以你需要确保你的代码没有依赖于这个服务器。 4. 检查你的路由配置。如果你在项目中使用了路由，确保你的路由配置正确，并且对应的组件和页面已经正确引入。 5. 检查资源路径。在打包后，资源文件的路径可能会发生变化。确保你的代码中引用的资源文件（如图片、样式表等）的路径是正确的。 6. 确认是否有使用第三方库或插件。有时候第三方库或插件可能与 Vue 3 不兼容，导致项目在打包后出现问题。尝试移除或更新这些库，看看是否有改善。 如果以上方法都没有解决问题，你可能需要进一步调试和排查。可以尝试在打包后的项目中逐步添加代码，以确定导致白屏的具体原因。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值