vue-cli3打包后出现空白页的解决方案

最新推荐文章于 2025-03-18 09:53:02 发布
最新推荐文章于 2025-03-18 09:53:02 发布
阅读量1.2w 收藏 4
点赞数 4
分类专栏： VUE武功秘籍 文章标签： vue打包 空白页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Oralinge/article/details/100072765
版权

在vue.config.js文件中加入如下配置：

// 基本路径
  // baseUrl: './',//vue-cli3.3以下版本使用
  publicPath: './', // vue-cli3.3+新版本使用

vue-cli + vue3.0创建的项目，打包后白屏
weixin_44384273的博客
03-13 1072
vue-cli + vue3.0创建的项目，打包后白屏 vue.config.js 配置模板
解决vue-cli2和vue-cli3项目分别打包后dist文件中index.html出现空白
Mini_小仙女的博客
07-08 2431
是不是遇到过在vue项目在开发环境下一切正常，但在npm run build之后，打开dist文件中的index.html页面却是一片空白，打开控制台发现报错：Failed to load resource: net::ERR_FILE_NOT_FOUND 出现这个问题的话，需要查看自己使用的是vue-cli2还是vue-cli3，他们处理方式不一样。 一.vue-cli2处理方式： 项目中找到config/index.js文件，将assetPublicPath的路径改为“./”即可。 二.
vue-cli3打包空白页面
qq_38059536的博客
09-27 1008
vue-cli3打包后出现空白页面导致这个问题的原因 导致这个问题的原因 router模式设置成history了，改成hash或者直接删除路由模式的配置 没有正确配置vue.config.js文件里baseUrl，应为（baseUrl: “./”） 如果项目根目录下有config文件夹，config文件夹中的index.js文件内修改assetsPublicPath为：（assetsPublic...
vue项目打包后预览空白
最新发布
qq_33298964的博客
03-18 514
【代码】vue项目打包后预览空白。
vue3 项目打包后白屏
L_C_sunny的博客
07-24 2089
根据Vue3.x文档，在 vue.config.js/vite.config.ts 统一对webpack、跨域、端口号等属性进行配置。1.在 vue.config.js/vite.config.ts添加publicPath属性并将值更改成 ‘./’2.若还没有解决就去路由中将history模式设置成默认的Hash模式，一般是服务器后端配置之后才使用history。一般建议默认的Hash模式。
【vue3】vite.config.ts(js)打包部署后页面白屏
lwc18639470699的博客
03-08 2254
在使用 HTML5 history 模式时，需要确保服务器能正确地处理路由请求。具体来说，服务器需要配置将所有路由请求重定向到你的应用程序的入口文件，以确保在刷新页面或直接访问路由时能够正确加载应用程序。而使用 hash 模式则不需要特殊的服务器配置，因为 hash 模式的路由会被浏览器自动处理。如果服务器配置存在问题，建议使用 hash 模式或者调整服务器配置以支持 HTML5 history 模式。如果不想有#，就用history模式，那就需要服务器配置正确。可能会导致页面白屏的问题，而使用。
Vue3项目打包后白屏解决办法（针对Vue3&Vue-cli 4.0及以上）
m0_46421377的博客
10-15 9406
在用最新的脚手架打包时，遇到了路径问题。 虽然是一个老生常谈的问题，但是查阅网上的资料发现大多是针对旧版本的框架进行webpack配置的更改来解决的。并不能用在我当前使用了最新的Vue3及其脚手架的项目上。 通过查看Vue3.x最新的文档结合旧版本的解决办法，我找到了针对最新版Vue框架下配置webpack而解决打包路径出错而白屏的办法： 由于在新的Vue中，目录层级结构发生改变，不再找得到bulid文件夹去设置index.js及其webpack的一些config.js。 根据Vue3.x文档，
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
解决vue-cli webpack打包后加载资源的路径问题
10-17
首先，当你的Vue项目在打包后出现访问空白的情况，这通常是因为静态资源（如CSS、JS、ICO等）无法正确加载。问题可能出在`dist`目录的结构上。在默认配置下，Webpack会将生成的静态文件放在`dist`目录下，而`index....
Vue-cli打包后如何本地查看的操作
11-19
值得一提的是，对于Vue-cli 3.0及以上版本的用户，打包后通常不会再遇到页面空白的问题，因为新版本的Vue-cli已经对这些问题进行了优化。不过，如果真的遇到类似问题，用户需要按照Vue-cli提供的部署指令去检查可能...
vue项目打包后打开页面空白解决办法
08-27
为了解决这一问题，本文将详细探讨Vue项目打包后出现白屏的可能原因及相应的解决办法。 一、路径问题 路径配置错误是导致Vue项目打包后页面空白的常见原因之一。在Vue项目中，index.html文件是项目的入口文件，其...
关于vue-cli3打包代码后白屏的解决方案
10-14
主要介绍了关于vue-cli3打包代码后白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3项目打包后白屏解决办法
enjoyenjoy576423146的博客
04-02 1963
一、页面空白？
vue3打包后白屏解决过程
RAXCL的博客
11-25 4381
将vue3项目打包后，打开index.html发现白屏，F12发现很多404，于是乎对vue.config加入了如下配置： 修改其资源访问默认指向，404问题得以解决。 BUT，白屏依然存在，继续找原因，发现index.html中有一句话： We're sorry but mobile doesn't work properly without JavaScript enabled. 去掉route.js如下配置： mode: 'history', //历史记录模式，去除url中的#
Vue3 + Vite 页面白屏问题（开发环境+生产环境）
Yana's Blog
05-06 9291
在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。
vue-cli3部署后刷新空白解决方案
锅巴胸的博客
06-13 4093
今天同学有个vue项目部署上线上后，刷新页面就会变空白页，因为项目是vue-cli3的比较新，我以前从来没遇到过部署后刷新页面空白的情况，于是我把他的项目试着在本地先模拟部署一下，确实是刷新后空白。在网上找方案各种实验都无效，于是我去官网找到官方配置，发现要加一句话 demo如下： server { listen 80; server_name ww...
Vue3+vite打包后页面空白问题
IT菜鸟
03-01 6492
项目是放在根目录运行，使用默认配置 import.meta.env.BASE_URL 默认输出 '/'；vite.config.js 增加 base: './'如果项目打包后放在二级目录运行，例如：test/dist。nginx配置（项目放在二级目录时配置nginx）里面的【路由History模式打包页面空白】打包后 index.html。
vue3项目，本地页面正常显示，打包后页面空白
lth002的博客
09-11 1162
通过浏览器的页面元素选择定位到问题是因为路由没有正确加载，但是排查了路由文件，入口文件，vite.config.js文件，都没有发现任何问题，直到将路由文件里面的按需加载页面文件改成直接加载，才正确渲染出了页面，才发现按需加载写错了。
vue3项目打包页面空白
03-08
### Vue3 项目打包后页面空白的原因及解决方案 #### 原因分析 当遇到 Vue3 项目打包后页面显示为空白的情况时，通常有几种常见原因： - **路径配置错误**：打包后的静态文件路径可能不正确，特别是在 `publicPath` 配置不当的情况下[^1]。 - **环境变量问题**：某些情况下，生产环境中使用的环境变量与开发时不一致可能导致应用无法正常加载资源[^2]。 - **依赖库版本冲突**：不同版本的依赖库之间可能存在兼容性问题，在构建过程中未能妥善处理这些差异也会引发此类现象[^3]。 #### 解决方案 ##### 修改 `vue.config.js` 如果项目中存在自定义配置，则需确保 `outputDir`, `assetsDir` 和 `publicPath` 设置合理。对于大多数场景而言，默认设置即可满足需求；但如果部署到子目录下，则应调整 `publicPath` 的值为相对路径 `/your-sub-path/` 或者绝对 URL 地址。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === &#39;production&#39; ? &#39;/your-sub-path/&#39; : &#39;/&#39;, }; ``` ##### 检查 HTML 文件引入顺序 确认 `index.html` 中 `<script>` 标签的位置是否恰当，特别是异步加载脚本时要保证其放置于 DOM 结构之后以便能够正确挂载应用程序实例。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>App</title> <!-- Other meta tags --> </head> <body> <div id="app"></div> <script src="/path/to/chunk-vendors.js"></script> <script src="/path/to/app.js"></script> </body> </html> ``` ##### 更新 Webpack 插件或 CLI 版本 有时旧版工具链中的 bug 可能会影响最终输出效果，尝试升级至最新稳定版本可以有效规避潜在风险[^4]。 ```bash npm install @vue/cli-service@latest --save-dev ``` ##### 清理缓存并重新安装依赖包 执行如下命令清除本地 node_modules 缓存，并重装所有必要的 npm 包以排除由于局部环境因素引起的问题。 ```bash rm -rf node_modules/.cache/ rm package-lock.json yarn.lock npm cache clean --force npm install ``` ##### 浏览器开发者工具排查 利用浏览器自带的开发者工具（F12），切换到 Network 标签下观察是否有请求失败的情况发生，同时注意 Console 输出的信息提示，这对于定位具体问题是很有帮助的。 ---
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值