vue项目打包后一片空白

最新推荐文章于 2025-06-10 10:54:08 发布
最新推荐文章于 2025-06-10 10:54:08 发布
阅读量422 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue开发项目 vue打包问题
本文介绍如何在config文件夹下的index.js中调整build模块导出的路径，并更改src/router/index.js中的路由模式以避免页面空白的问题。

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





修改在config文件夹下面的index.js中build模块导出的路径，assetsPublicPath默认的是’/’，也就是根目录。而index.html和static在同一级目录下面，所以改为’./’


另外在src里面router/index.js路由设置里边默认模式是hash，如果改成了history模式的话，打开也是一片空白。


随手附送个解决方案http://www.php.cn/js-tutorial-405421.html



vue项目打包后打开index.html一片空白
ai
03-16 2002
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
Vue 2项目打包后dist中index.html用浏览器无法直接打开
最新发布
白白白鲤鱼的博客
06-10 842
Vue 2项目打包后dist中index.html用浏览器无法直接打开
vue项目打包后首页空白
qq_36229632的博客
12-06 728
VUE项目在运行npm run build后会生产一个dist的文件夹，该文件夹里就是项目打包后的文件。但是当我们打开index.html文件后发现首页是空白的。出现这种情况主要是因为路径不正确导致导致，具体解决方案如下！ 1.在config文件夹里找到index.js修改build配置，如下图assetsPublicPath默认是"/"修改修改成"./" 修改完成后我发现了首页可以正常打...
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
Vue项目打包之后页面空白的具体原因及解决办法
zLanaDelRey的博客
11-13 1739
本地运行时，页面还是正常的。但在使用npm run build对项目进行打包之后，index.html打开之后一片空白。 解决办法 修改config下的index.js文件。找到build将assetsPublicPath默认路径修改为'./' 修改之后再运行npm run build之后就会正常显示了 将路由模式history改成hash模式，改为mode: "hash"。路由默认配置为ha...
vue项目打包后打开页面空白解决办法
01-21
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的...
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
vue项目打包后一片空白解决办法
weixin_46089851的博客
08-21 1102
vue项目打包后一片空白解决办法 网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 module.exports = { build: { env: require('./prod.env'), i
vue项目打包后首页一片空白解决办法和具体原因总结
weixin_42017221的博客
02-17 2795
很高兴在万千文章中你看到本章，希望能为你解决问题！！！在最初用+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。
vue文件打包之后打开index.html发现一片空白
rating_的博客
03-04 1377
原因：打包之后的文件加载资源的路径不对 解决办法： 在vue.config.js文件中修改路径 module.exports = { publicPath: './' } 如果router/index.js文件里面有mode: 'history’的话删去或者注释即可 ...
vue打包下来后打开的index.html页面是空白的
m0_62783418的博客
02-16 2176
对vue项目打包下来后打开的index.html页面时呈现空白的页的一种解决方法
Webpack打包vue项目后发现index.html为空白
EdgeWorld的博客
05-11 370
之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，
Vue通过build打包后 打开index.html页面是空白的
一劍傾城
01-22 999
Vue通过build打包后 打开index.html页面是空白的 最近在build打包vue项目遇到了几个问题，如下： 1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因：找到c...
vue项目打包后index.html文件打开空白
guojing5721的专栏
11-08 1万+
build打包vue项目遇到的问题，如下： 1、npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因：找到config文件下index.js，会发现build下的 assetsPublicPath：' / ' 默认为根目录，而index.html和stat...
vue项目打包访问index.html页面出现空白
muzidigbig的博客
01-04 9707
错误现象： 1.主要的问题就是路径问题 因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 只要修改config文件夹里的index.js里的assetsPublicPath的值； config/index.js assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级...
vue.config 配置
tp27933的博客
09-25 1037
這裡記錄下 練習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' ?
vue3项目使用electron-builder打包一片空白
09-07
Vue3项目使用`electron-builder`打包通常是为了将Web应用转换为桌面应用程序，以便能够在Windows、Mac和Linux等操作系统上离线运行。以下是基本步骤： 1. **安装依赖**： 首先，在你的Vue3项目中安装`@vue/cli-D @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值