【Vue2+ThreeJS踩坑记录（三）】Vue2打包项目之后，运行本地项目为空白页解决办法

最新推荐文章于 2023-12-06 00:22:03 发布
最新推荐文章于 2023-12-06 00:22:03 发布
阅读量636 收藏 1
点赞数
文章标签： javascript vue.js ThreeJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37704442/article/details/127839489
版权

错误情况与描述

项目的时候，运行正常，结果打包，访问就是空白页

错误原因

因为打包的时候，资源路径出现了问题

错误解决办法

第一步修改config文件夹下的index.js文件

修改assetsPublicPath为’./’
在这里插入图片描述

第二步修改build文件夹下的webpack.prod.conf.js文件

在output下添加publicPath:‘./’
在这里插入图片描述

第三步修改build文件夹下的utils.js文件

在ExtractTextPlugin.extract位置处添加 publicPath:‘…/…/’,

在这里插入图片描述

曾胖神父
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
2. **配置Vue Router的`base`**：在`router/index.js`中，设置`base`为相同的上下文路径`'/api/'`，确保路由跳转与上下文路径一致。 3. **配置Ajax请求的基础URL**：对于使用axios或其他HTTP库进行的Ajax请求，需要...
在vue中使用three.js 1.0--本地搭建Threejs官方文档网站
m0_50207524的博客
03-30 367
threejs官方文档在使用threejs 会出现官网加载比较慢和白屏的情况，本地搭建threejs官网可以很好的解决这个问题。
vue项目打包白屏解决
m0_73321385的博客
06-13 8998
如果使用了 Vue Router history 模式，在打包后需要配置服务器，以避免出现404错误。在 Vue 项目中，打包后会生成一个 dist 目录，确保 index.html 引用的资源路径都是相对于 dist 目录的。如果在本地测试时没有问题，但是打包后出现了白屏，可能是因为本地使用了服务器，但是打包后未启动服务器，需要手动启动服务器。如果打包后出现了白屏，可能是因为路由没配置正确。可以检查路由文件是否正确引入、是否正确配置了路由及其子路由等。如果没有生成，说明打包过程出现了问题。
vue2打包后打开网站页面空白
weixin_52901482的博客
07-24 436
报错的原因在于index.html页面里引入文件的路径有问题，js文件路径引入错误。加入一行代码 publicPath: './',找到项目目录中的vue.config.js。
vue2.0 打包发布完整版解决页面空白
weixin_48313011的博客
11-22 2691
vue+element 打包发布配置
Vue3项目(vben框架)打包时报错：JavaScript heap out of memory
一方湖泊
07-23 1546
我用的解决了问题，方法二中将内存设置为了16g，方法三中内存设置16g也就是。
vue项目打包后打开页面空白解决办法
08-27
Vue 项目打包后打开页面空白解决办法 在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script ...
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8502
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
webpack5+vue3+three.js打包vue插件遇到插件静态资源无法找到文件的问题（hdr,wasm,gltf,,,等静态文件）
mmiaoChong的博客
09-28 2385
问题描述： 在使用webpack5+three.js写vue3插件时候，在加载hdr环境贴图使用的绝对路径无法正确加载 main.js?be46:51335 THREE.RGBELoader Bad File Format: bad initial token // 加载hdr图片失败 main.js?be46:65347 SyntaxError: Unexpected token < in JSON at position 0 // 加载模型失败 at JSON.parse (<an
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
当我们写完一串JS代码后，点击运行，在浏览器显示一片空白，这个时候我们如何解决?
2303_77434440的博客
06-02 1234
(2)如果不是搬移代码的问题，就可以开始采用分部运行的办法进行测试，采用ctrl+/对于各个部分的代码进行注释，从HTML文件中整体入手，头部和身体分别开始运行，那些是主体开始运行，那些是分级开始运行，注意变量与变量之间的关系，注意不同属性的语法格式以及相关功能之间的冲突。在完成前面两项的排除之后，可以确定非代码的问题，开始思考是否是hubuildx问题，选择一个网址：菜鸟教程的网站，通过菜鸟教程中的运行板块对于代码进行运行，如果代码可以运行成功，则说明其本身是运行环境的问题，对于运行环境进行解答即可。
vue打包完成后出现空白页原因及解决
最新发布
weixin_42178670的博客
12-06 2004
vue打包完成后出现空白页原因及解决
Vue2项目, 打包后, 页面显示空白
weixin_40944062的博客
02-18 1217
在Vue2项目打包后, 发现生成的index页面为空白 这里的解决办法 修改router文件中的mode, history模式, 会让访问路径变得简洁, 没有#, 不过, 需要后端的处理, 也可能导致访问有问题, 所以, 还是使用了h5的hash. const router = new Router({ routes, // mode: 'history', // 将mode模式改为hash. mode: 'hash' }) 这里只是这一次遇见的问题, 具体问题还是需要具体对待, 其他
（一）ThreeJS本地环境搭建
轮回的秋
11-14 2109
threeJS API、编辑器、示例代码部署在外网节点，访问不稳定。
Vue在打包项目时显示空白页问题和一些解决思路
benlalagang的博客
08-01 7462
Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变
vue项目打包后打开空白解决办法
05-10
vue项目打包后打开空白的情况可能有很多原因，解决办法也有多种，下面是几种常见的解决办法： 1. 检查文件路径：在打包后文件的引用路径可能出现错误，导致页面打开空白，因此需要检查文件路径是否正确，确保可以正确引用文件。 2. 检查打包工具的配置：有时候打包工具的配置可能存在问题，比如缺少一些必要的插件或者配置不正确，需要仔细检查配置文件，确保配置正确。 3. 检查代码错误：有时候打包后页面打开空白可能是因为代码错误，比如语法错误或者逻辑错误，需要仔细排查代码，找到并修复错误。 4. 检查依赖版本：项目中使用的依赖版本可能存在不兼容的问题，需要更新或者降级依赖版本，确保依赖版本能够兼容。 5. 检查浏览器缓存：有时候打包后页面打开空白可能是因为浏览器缓存问题，可以尝试清除浏览器缓存，再重新打开页面看看是否能够解决问题。 6. 检查打包后的文件是否正确：可能是打包后文件出现错误或者缺失导致的，需要重新打包或者检查是否有文件缺失。 综上所述，解决vue项目打包后打开空白的问题需要仔细排查和调试，找到并修复问题的根本原因，才能够解决该问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值