vue 打包后页面空白

最新推荐文章于 2025-05-11 22:08:26 发布
原创 最新推荐文章于 2025-05-11 22:08:26 发布 · 460 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文指导如何在Vue项目中遇到资源未找到的问题时，通过修改config和build配置，修复打包后的页面问题。步骤包括调整index.js和utils.js设置，确保资源路径正确，以便成功重新构建并运行应用。

vue项目，使用npm run build打包后页面变成了这样
在这里插入图片描述
为什么会变成这样呢，大约是资源文件没有找到。接下来看解决方案
1、打开config->index.js
请添加图片描述
改为
请添加图片描述
2、打开build->utils.js请添加图片描述

设置完后重新npm run build

hehe-呵呵
关注
vue打包后显示空白正确处理方法
08-28
以下是一些解决 Vue 打包后显示空白页的常见方法： 1. **检查配置文件**： - 在 Vue 项目中，配置文件通常为 `vue.config.js`。我们需要确保这个文件存在，并且配置正确。如果你的项目没有这个文件，可以创建一个...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 ...总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。
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项目打包后打开空白解决办法
热门推荐
王永存
09-22 4万+
vue+webpack+HBulider打包后手机上一片空白解决办法 网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8927
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
vue打包下来后打开的index.html页面是空白的
m0_62783418的博客
02-16 2249
对vue项目打包下来后打开的index.html页面时呈现空白的页的一种解决方法
Webpack打包vue项目后发现index.html为空白
最新发布
EdgeWorld的博客
05-11 514
之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9772
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
Vue打包后（打开index）出现空白问题
qq_44866810的博客
12-08 646
Vue打包后（点击index）出现空白问题
Vue项目打包后打开index.html空白问题
UIadso的博客
04-19 1505
问题描述：Vue项目打包后，在dist文件夹中打开index.html，浏览器显示一片空白。 解决方案：在项目中找到vue.config.js文件，添加如下代码： module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } 之后再进行 npm run build打包。 此时打开index.html。网站可以正常显示。 但是点击网页中任何路由链接都会出现网页出现问题的报错。 解决方案...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了，因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请求地址是这样的。 进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误，就去config文件夹下的index.js中寻找问题。index.js中的bui
vue3打包后部分页面空白
Shawn的个人博客
08-03 806
一、问题描述 在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。 二、问题解决 查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。 ...
Vue项目打包后打开空白解决办法
weixin_44090040的博客
10-13 7781
前言 问题描述：Vue项目打包后，打开index.html出现空白页面 一、出错分析？ 这个主要原因是路径的问题。 二、解决方法 1.修改config下的index.js中bulid模块导出的路径 config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下
vue打包dist后进入index.html出现空白页面，无法显示问题
cuicanxinghui的博客
12-23 951
Failed to load resource: net::ERR_FILE_NOT_FOUND app.e0d7d359.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND chunk-vendors.fc58545c.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND app.dea73b0f.css:1 Failed to load r
vue.config 配置
tp27933的博客
09-25 1084
這裡記錄下 練習vue時用到的config const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', outputDir: process.env.NODE_ENV === 'production' ?
解决vue项目打包后打开index.html一片空白
sinat_36141399的博客
11-30 1万+
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 ...
vue项目打包后页面空白
06-06
可能有多种原因导致打包后页面空白，以下是一些常见的解决方法： 1. 检查浏览器控制台是否有报错信息，如果有的话，根据报错信息进行排查。 2. 确认打包后的文件路径是否正确，特别是 index.html、JS 和 CSS 文件...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值