vue项目打包后页面出现空白,css / js 文件访问不到

最新推荐文章于 2023-12-11 15:05:17 发布
最新推荐文章于 2023-12-11 15:05:17 发布
阅读量965 收藏 3
点赞数
分类专栏： vue 文章标签： vue css js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42486925/article/details/111666083
版权

打包前在本地跑起来都没什么问题,但是打包之后dist扔到线上就访问不到,显示空白,有的css / js文件还显示404,访问不到.

首先,确认你的访问路径是对的

其次,将项目中config/index.js中

默认生成的assetsPublicPath只有/ , 前面加个 . 就好了

TOP_link
关注
专栏目录
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
在使用Vue CLI构建项目时，有时会遇到打包后出现空白页和路径错误的问题。这些问题通常是由于配置不当或者对Vue CLI的打包机制理解不足所引起的。本文将详细解析这两个问题及其解决方案。 首先，让我们来深入了解...
vue 打包部署后打开网页空白，找不到css、js等资源
qq_40079749的博客
05-15 2299
vue 打包部署后打开网页空白，找不到css、js等资源 1、修改config文件夹下的index.js文件 build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',//前面加上. produc
前端vue 打包部署后 原本http请求变成了https
superwa的博客
05-27 3440
之前添加了这句 给自己挖坑了 导致变成了https 这个代码的作用是将站内加载的资源自动将http转为https 去掉即可
vue项目打包发布，页面出现空白，无法访问css/js文件
anwen743680的博客
11-15 2550
vue项目打包发布，找不到css和js资源
vue项目本地正常运行，打包到线上时无法访问js等资源
最新发布
生而为人我很抱歉
12-11 1470
config/index.js文件的build/assetsPublicPath应该配置成和nginx（或tomcat）一致。
Vue项目部署在Spring Boot出现页面空白问题的解决方案
10-17
当Vue项目部署在Spring Boot应用中，如果Spring Boot配置了server.servlet.context-path（通常用于设置应用上下文路径），可能会导致静态资源文件（如CSS和JavaScript文件）加载路径不正确，从而引发页面空白。...
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
在使用Vue.js框架进行前端开发的过程中，经常需要打包应用以便将其部署到生产环境中。...通过上述的方法，可以较好地解决Vue打包静态资源后页面显示空白和static文件路径报错的问题，提高项目的稳定性和用户体验。
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
VUE打包发布后无法访问js、css资源
weixin_30912051的博客
12-18 2115
　　在vue开发中，本地测试以及测试环境中都没有遇到问题，当发布生产，有虚拟路径时，便出现js、css均报错404； 　　首先在config的index.js文件中，将assetsPublicPath修改为'./'，如下图； 　　 　　然而打包发布后发现放在assets文件夹中的图片资源又报404，观察那个路径，发现多了一层statics/css/img的路径，我们要找到buil...
vue打包发布后css文件404
AD_Camilk的博客
08-12 1180
vue打包发布后文件404
vue 自建的css文件打包后找不到
wangooo的博客
09-21 1072
vue中使用固定的css文件
vue-cli3.0打包页面无法加载js文件
otatoz
12-11 3765
使用 npm run build 打包后，浏览器访问dist/index.html文件时，无法加载js文件 解决方案： 在网上搜了很多方法，他们修改的配置文件都不适合vue-cli3.0，因为vue-cli3.0的目录结构如下： 此时需要自己新建一个文件：（根目录下新建vue.config.js） module.exports = { publicPath: './', ...
如何解决vue打包项目中的图片,静态css,js 不能访问路径问题
weixin_43962555的博客
02-22 1708
1.在书写代码的时候按照相对路径引入； 2. 但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的； 实际写的代码 <template> <div> <div class="logo"></div> <img src=&
前端部署的js文件和css文件不显示的原因
lck898989的博客
10-27 3353
再用webpack打包前端项目的时候出现js文件和css文件不能加载的情况： 原因： 1：nginx访问静态资源文件的配置出现问题 2：打包文件路径出现问题 如： //输出文件路径 output:{ //存放文件的路径 path:'./dist', //访问文件的路径 :如果实在线上部署的话加上验证就会打到source.list.top/l
vue中loading chunk-xxx.css failed和net::ERR_ABORTED 404 解决方法
红烧大熊猫的博客
12-27 8883
文章目录前言1. 问题现象2. 解决方法3. 总结问题出现原因 前言 本文只是记录了自己经历项目出现的Loading chunk-xxx.css failed问题出现的原因和解决方法，该问题出现的原因可能和项目所使用的框架有关，并且出现的条件比较苛刻，可能并不适用于所有的情况，具体可看文章的第3部分3.总结问题出现原因，这里仅展示了一种解决思路。 项目的框架是：vue 2.6.10 + element-ui 2.11.1 "dependencies": { "core-js": "^2.6.5"
【vue】打包后，访问public文件的index.html，访问不到js和css，需要配置publicPath:“ “
weixin_43444977的博客
10-11 4393
在vue.config.js文件添加配置项publicPath，publicPath路径修改" "，dist文件下index.html即可找到。vue.config.js文件中publicPath路径为“/”，表示根目录下，是访问不到js和css文件的，vue项目打包后， index.html直接访问不到 css 文件和 js 文件；
vue项目打包后css js 加载不进来，路径不对的问题
cc蒲公英的博客
07-03 1284
vue项目打包后css js 加载不进来，路径不对的问题
nginx部署二级目录无法加载css和js问题解决方案
热门推荐
guiripei的专栏
07-06 1万+
nginx部署二级目录无法加载css和js问题解决方案
vue项目打包后页面空白
06-06
3. 检查是否有未添加到依赖中的第三方库或插件，可能会导致打包后页面空白。 4. 确认是否正确设置了路由和组件，打包后的路由路径和组件名是否匹配。 5. 使用 Vue Devtools 插件进行调试，查看组件的状态和数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值