vue打包项目以后白屏和图片加载不出来问题解决方法

最新推荐文章于 2024-02-17 13:53:41 发布
最新推荐文章于 2024-02-17 13:53:41 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 前端入门到转后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/unhejing/article/details/104705995
版权

vue打包项目以后部署访问白屏。查看控制台是404.这是由于打包的时候没有设置对静态资源路径。原文件是绝对路径，需要改成相对路径。

1.白屏修改config/index.js

2.图片加载不出来，修改build/utils.js

unhejing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目打包后部分背景图片加载失败
weixin_43991262的博客
10-31 1648
1、项目打包以后静态文件资源访问不到，路径错误 打开config文件夹下面的index.js文件，找到以下位置： 原文件中红框标出的位置是 assetsPublicPath: '/', 修改为 assetsPublicPath: './', 保存。 要注意的一点是修改index.js中 build对应的该属性，不要修改错了。 2、打包后部分背景图片加载失败 原因：为了节省资源请求次数，vue...
vue项目打包后首页一片空白解决办法和具体原因总结
最新发布
weixin_42017221的博客
02-17 1405
很高兴在万千文章中你看到本章，希望能为你解决问题！！！在最初用+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。
Vue项目build后，图片加载不出来
weixin_34261415的博客
01-22 2307
vue项目，build之后会对图片进行处理，具体处理的方式是在文件webpack.base.conf.js中，有如下代码： module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', ...
vue项目打包白屏解决
m0_73321385的博客
06-13 8130
如果使用了 Vue Router history 模式，在打包后需要配置服务器，以避免出现404错误。在 Vue 项目中，打包后会生成一个 dist 目录，确保 index.html 引用的资源路径都是相对于 dist 目录的。如果在本地测试时没有问题，但是打包后出现了白屏，可能是因为本地使用了服务器，但是打包后未启动服务器，需要手动启动服务器。如果打包后出现了白屏，可能是因为路由没配置正确。可以检查路由文件是否正确引入、是否正确配置了路由及其子路由等。如果没有生成，说明打包过程出现了问题。
vue项目打包后放到服务器上是空白页面,vue项目打包后打开页面空白解决办法
weixin_35562751的博客
08-13 4147
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。assetsPublicPath默认的是 ‘/' 也就是根目...
vue项目打包之后首页白屏的问题
weixin_30832983的博客
05-28 1852
本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。 解决方法 1.路径问题 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成assetsPublicPath: './' 2.路由问题 router.js中 注释 // mode: 'history', // 默认hash ...
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
解决vue build打包之后首页白屏的问题
11-30
本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 2、解决方法 在config文件夹中找到index.js打开把assetsPublicPath: ‘/’改成下图方框中的样子。  ...
vue-router懒加载速度缓慢问题及解决方法
12-11
 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
网上流行的解决方案是将assetsPublicPath: ‘/’改成’./’，下面说一下这个解决方案的...Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览器的时候出现white label, 也就是404错误，解决的方案基本是把er
vue-router路由懒加载的实现（解决vue项目首次加载慢）
12-11
在Web应用程序中，系统的瓶颈常在于系统的响应...像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loa
React项目build打包后，页面空白的解决方案
苍老师背后的男人
08-23 1598
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8334
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
为什么Vue打包出来的项目是空白页面？
Alanrnzearn的博客
07-08 3012
        有时候稍微没注意，用Vue打包出来的项目经过本地直接打开时发现竟然是空白页面！         1. 最直接的原因就是在打包项目的时候忘记创建vue.config.js文件了，这个时候在原Vue项目底下新建vue.config.js文件，内容为： module.exports = { publicPath:'/', out
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项目打包后出现页面布局异常、图片显示不出来等问题
weixin_46545863的博客
07-25 5853
vue项目打包后出现页面布局异常、图片显示不出来等问题
App 启动页 -- 加载一张图片以及解决白屏或者黑屏（闪屏）问题
记录移动开发相关的知识
01-03 1168
功能 App 启动页面。显示 1.5 秒到 2 秒，然后跳转到首页。 实现 1. 定义 drawable 文件 splash.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!...
Vue解决vue build打包之后首页白屏给加载中提示
07-13
你可以尝试以下几种方法来解决 Vue 打包后首页白屏的问题，并给出加载中提示： 1. 确保你的路由配置正确：检查你的路由配置是否正确，确保首页的路由地址与你的组件路径匹配。 2. 检查是否正确引入了组件和资源：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值