Vue项目打包后页面空白的问题

已于 2022-03-16 19:22:55 修改
阅读量1.9k 收藏 4
点赞数
文章标签： 前端 vue
于 2022-03-06 11:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_49841234/article/details/123291921
版权
本文主要探讨了Vue项目打包后可能出现的两种问题：资源加载失败和无报错但页面空白。对于资源加载失败，解决方案是创建一个`vue.config.js`文件并配置正确路径。对于无报错的情况，当使用history路由模式导致页面不显示时，需修改`publicPath`为'/'，确保路由正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

第一种情况 资源加载失败

报错如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thgdjh12-1646450652321)(file://D:/soft/Gridea/yuanwenjian/post-images/1644893370600.png)]
这个问题是由于路径的问题，我们可以在项目下新建一个 vue.config.js 文件，在里面我们输入如下代码

module.exports = {
   
  publicPath:'./'
}

再重新进行打包就可以了，这时候的资源都能够加载成功了

第二种情况 无报错

此时我们可能在使用路由时，为了美观将其mode改为了history模式，此时我们需要将其改为hash模式才能正常显示，这时候我们要找到 src/router 下的index.ts/index.js文件将 createWebHistory改为 createWebHashHistory即可

最低0.47元/天 解锁文章
一叶zhi秋
关注
解决vue 打包发布去#和页面空白的问题
12-12
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTownWebApp/',//这个地方使用绝对路径很重要 /** * Source Map
vue项目打包后打开页面空白解决办法
01-21
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: p
vue解决执行打包之后打开页面空白问题
qq_60976312的博客
12-28 2861
解决执行build打包命令之后打开dist文件下的html页面空白的问题
解决Vue打包后空白屏常用方法及问题原因
最新发布
在全栈和前端徘徊的程序员
04-10 835
一般情况下vue在dev运行正常，打包后空白屏的问题造成原因是由静态资源路径错误引起的，可以在。服务器未正确配置 MIME 类型可能导致资源加载失败。打包后的静态资源路径可能与实际部署环境不匹配。文件可能未正确加载 JS 或 CSS 文件。打包后的代码可能存在未捕获的错误导致页面崩溃。模式，服务器未正确配置会导致资源无法加载。某些第三方库可能未正确打包到项目中。浏览器可能加载了旧版本的资源文件。
【个人笔记】Vue.js 项目在打包后出现空白页
qq_63856835的博客
07-11 734
Vue.js 项目在打包后出现空白页。
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
Vue在打包项目时显示空白页问题和一些解决思路
benlalagang的博客
08-01 8385
Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 ...总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。
vue 打包后页面空白问题
1234Wu--前端Blog
02-19 1613
1.可能是打包的路径有问题 你可以打开打包后的index.html检查一下css,js的路径是否正确； 路径不正确，你就需要在vue.config.js中修改这个属性：（vue.config.js不知道怎么配置看这里：vue.config.js配置） publicPath: "./", // 根域上下文目录 2.router.js配置的问题 Vue-router 中有hash模式和histor...
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8839
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
vue打包发布后页面空白
shileimohan的专栏
06-18 1776
在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览。根据官网打包出来的html直接打开是显示空白。 vue打包后显示空白正确处理方法是 1、找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2、修改 找到对应的位置加上publicPath: '../../'然后就成功了！ 很多朋友还遇到这样的问题 vue打包后index文件一片空白，怎么回事呢？ vue项目你npm run build打包后，点开index文件打开一片空白， （二）...
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue项目打包之后页面空白解决办法
life_stranded的博客
06-04 860
写比赛作品的时候遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，什么都不显示。 解决方法 修改 assetsPublicPath 在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点，如下图： assetsPublicPath: './', ...
vue 打包空白
qq_38388578的博客
01-04 297
1、改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径  assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’ 2、另外还需要注意一点。src里边rou...
vue-cli3项目中，配置vue.config.js解决打包以后页面空白问题
沧笙踏歌的博客
03-31 3962
问题说明 项目用的是vue-cli3,我是在npm run build以后，打开打包好的文件，结果页面空白，打开console控制台，结果是文件的路径引入错误。 解决 根目录下新建vue-config-js 我们简单一些，不写其他配置项 module.exports = { publicPath: "./" }; 修改route配置 吧mode: "history",注释掉，这样，默认就...
vue项目打包后页面空白
06-06
可能有多种原因导致打包后页面空白，以下是一些常见的解决方法： 1. 检查浏览器控制台是否有报错信息，如果有的话，根据报错信息进行排查。 2. 确认打包后的文件路径是否正确，特别是 index.html、JS 和 CSS 文件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值