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

最新推荐文章于 2025-04-10 23:25:18 发布
最新推荐文章于 2025-04-10 23:25:18 发布
阅读量861 收藏
点赞数
分类专栏： 前端bug 前端心得
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/life_stranded/article/details/90814384
版权
本文介绍了一个常见问题的解决方案：使用npm run build打包项目后，在服务器上打开index.html时页面显示空白。通过调整config/index.js文件中的assetsPublicPath属性值为'./'，可以有效解决该问题。

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

写比赛作品的时候遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，什么都不显示。

解决方法

修改 assetsPublicPath 

在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点，如下图：

assetsPublicPath: './',


 

Vue项目打包后页面空白的问题
qq_49841234的博客
03-06 1918
第一种情况 资源加载失败 报错如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thgdjh12-1646450652321)(file://D:/soft/Gridea/yuanwenjian/post-images/1644893370600.png)] 这个问题是由于路径的问题，我们可以在项目下新建一个 vue.config.js 文件，在里面我们输入如下代码 module.exports = { publicPath:'./' } 再重新进行打包就可以了，
为什么Vue打包出来的项目是空白页面？
Alanrnzearn的博客
07-08 3543
        有时候稍微没注意，用Vue打包出来的项目经过本地直接打开时发现竟然是空白页面！         1. 最直接的原因就是在打包项目的时候忘记创建vue.config.js文件了，这个时候在原Vue项目底下新建vue.config.js文件，内容为： module.exports = { publicPath:'/', out
解决Vue打包后空白屏常用方法及问题原因
最新发布
在全栈和前端徘徊的程序员
04-10 865
一般情况下vue在dev运行正常，打包后空白屏的问题造成原因是由静态资源路径错误引起的，可以在。服务器未正确配置 MIME 类型可能导致资源加载失败。打包后的静态资源路径可能与实际部署环境不匹配。文件可能未正确加载 JS 或 CSS 文件。打包后的代码可能存在未捕获的错误导致页面崩溃。模式，服务器未正确配置会导致资源无法加载。某些第三方库可能未正确打包到项目中。浏览器可能加载了旧版本的资源文件。
Vue在打包项目时显示空白页问题和一些解决思路
benlalagang的博客
08-01 8395
Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
vue解决执行打包之后打开页面空白问题
qq_60976312的博客
12-28 2862
解决执行build打包命令之后打开dist文件下的html页面空白的问题
vue项目打包后打开页面空白解决办法
08-27
面对Vue项目打包后页面空白的问题，开发者应采取以下步骤进行解决： 1. 首先，检查项目config文件夹中的index.js文件，确保其中的assetsPublicPath属性正确配置了静态资源的路径。 2. 其次，检查src文件夹中router/...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 ...总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
Vue3打包发布后，页面运行起来空白
cwhzm的博客
07-10 2249
1、npm run build 后 把dist 文件夹中的文件传到 云服务，跑起来是空白的。
【个人笔记】Vue.js 项目在打包后出现空白页
qq_63856835的博客
07-11 739
Vue.js 项目在打包后出现空白页。
解决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项目出现页面空白的解决方案
10-16
今天小编就为大家分享一篇vue项目出现页面空白的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 修改项目启动后的页面_vue项目打包后打开页面空白解决办法
weixin_35654499的博客
01-30 556
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。module.exports = {build: {env:...
vue项目打包后，打开页面为空白的解决办法
m0_51060602的博客
03-10 1万+
vue项目打包上线后，出现空白页面的解决办法
vue打包完成后出现空白页原因及解决
weixin_42178670的博客
12-06 2180
vue打包完成后出现空白页原因及解决
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9673
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue项目打包后打开空白解决办法
05-10
vue项目打包后打开空白的情况可能有很多原因，解决办法也有多种，下面是几种常见的解决办法： 1. 检查文件路径：在打包后文件的引用路径可能出现错误，导致页面打开空白，因此需要检查文件路径是否正确，确保可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值