vue打包发布后css文件404

已于 2023-01-11 10:10:49 修改
阅读量1.1k 收藏
点赞数
文章标签： vue.js css 前端
于 2022-08-12 09:21:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AD_Camilk/article/details/126296959
版权

项目背景： 前端 ts+vue2 打包到docker 部署后其他页面正常但是有一个页面的echarts没有加载出来，浏览器的console提示某个css文件404

解决过程： 解压jar包 找到了该文件，但是该文件的大小是0KB 一番排查后发现是因为vue文件的style部分写了样式，但是被注释掉了，除了被注释掉的css代码，就没有其他css代码了，删掉被注释的代码，再重新打包，就没问题了

结论： vue style标签内的样式文件，可以不写，但是不可以写完之后全部注释， 另外提一下在vue3中 写两个style标签打包会报错

国家十级划水运动员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决Vue打包之后文件路径出错的问题
08-27
本文将深入探讨如何解决Vue打包后文件路径出错的问题。 首先，我们来分析问题的原因。Vue CLI在构建项目时，会根据配置文件进行一系列优化，包括代码分割、压缩等。其中，静态资源的路径处理是关键部分。默认情况下...
Vue打包后出现一些map文件的解决方法
08-28
本文将介绍如何解决Vue打包后出现.map文件的问题。 首先，理解.map文件的作用至关重要。Source Map（源码映射文件）是用于将压缩后的代码映射回原始源代码的文件，它的存在使得在浏览器的开发者工具中，即使代码...
VUE前端代码打包后上传到服务器上js css 文件404
Jack_13201的博客
11-14 2635
VUE前端代码打包后上传到服务器上js css 文件404 一：问题现象 用服务器网址访问后，出现js css 文件404 二：问题产生原因 1：前端项目是打包完成后传给后台，打包的时候所有的文件路径都是绝对路径 2：讲道理目录不能有什么/monitor，不用跟后缀的，就可以直接访问项目的index.html文件 三：解决办法 在webpack中加上一句话 // moitor 是后台自己加的...
vue：webpack打包过程中的常见错误-加载CSS文件
NXBBC的博客
05-01 1398
module使用的常见问题
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
vue项目打包后页面出现空白,css / js 文件访问不到
TVM的博客
10-29 2978
打包前在本地跑起来都没什么问题,但是打包之后dist扔到线上就访问不到,显示空白,有的css / js文件还显示404,访问不到. 首先,确认你的访问路径是对的 其次,将项目中config/index.js中 默认生成的assetsPublicPath只有/ , 前面加个 . 就好了 ...
Vue打包整合到SpringBoot项目时遇到 js 和 Css 404的问题
春花秋月冬雪风，留得残荷听雨声。
04-18 3375
当使用Vue 和SpringBoot 分别开发前后端，而需要整合部署到同一个项目时，往往会遇到一些奇奇怪怪的问题，出现一些很烦人的错误。本篇文章通过结合自己实践的经验，简单的介绍一下Vue 和SpringBoot整合打包的流程以及出现典型问题的解决方式。 1、首先是通过 npm run build 打包Vue 项目 一般来说可以用默认的设置，直接打包，也可以进行自己的一些修改 对于Vue 2.0 来说，可以通过编辑config/index.js来修改配置 build: { // Templ
vue3 + vite2 打包部署后 404 解决方案
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
03-24 1万+
vue3 + vite2 打包部署后 404 解决方案 404现象解析 如果在开发环境没问题，但是部署后（部署到服务器的非根目录的情况时）出现很多相关的js，css文件报404，那么可以看一下index.html中的资源引用，如果都是/assets开头，那么这个时候就需要修改配置文件，重新打包了。 解决办法 在vue2中我们在config/index.js文件中配置了 assetsPublicPath:’./’，同理，vue3中也需要配置这个属性，vue3中vite生成的项目，没有config文件夹，
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue打包css文件中背景图片的路径问题
10-18
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 引入公共css文件的简单方法(推荐)
08-28
Vue 引入公共 CSS 文件的简单方法 在 Vue 项目中，引入公共 CSS 文件是一个非常重要的步骤。今天，我们将分享三种简单的方法来引入公共 CSS 文件，以便提高开发效率和代码维护性。 方法一：在入口 js 文件中引入 ...
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改，改为 目的是将资源文件的引入路径，改为相对地址（相对index.html） 二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径 此时的
vite+vue3项目部署到gitee pages报文件资源404 Not Found 问题踩坑记录
夏夜追凉丶的博客
05-24 880
项目打包dist后，部署到gitee pages上时，报css与js文件资源404 Not Found 的错
Vue3项目require引入css文件报错：require is not defined
acheding的博客
11-12 4281
用 import 代替require，如果是在 if 语句里动态引入，别忘了给 css 路径加括号。
Vue打包错误UnhandledPromiseRejectionWarning: CssSyntaxError
最新发布
gdgztt的专栏
11-25 491
Vue打包错误UnhandledPromiseRejectionWarning: CssSyntaxError。
vue打包后字体图标丢失、部分静态资源404问题
weixin_55629817的博客
03-17 928
打包后字体图标丢失、静态资源404
解决Vue前端项目打包部署到tomcat后浏览器F5刷新页面404问题
Let_me_tell_you的博客
06-22 2495
因为tomcat本身不支持这个模式，所以如果你的项目和我的项目一样，不需要考虑SEO什么的，可以简单处理一下，直接在创建 Vue Router 实例的时候指定使用 hash mode，这样就不用去修改tomcat的配置来支持 history mode了。使用hash mode时，浏览器的URL中的hash发生变化时，浏览器不会重新加载页面，而是通过监听 hash 变化事件来实现页面更新。Tomca服务器本身不支持Vue中的 HTML5 History Mode，而之前的配置，正是。
vue项目部署到tomcat服务器产生的404问题解决
qq_50121370的博客
01-13 2426
如果我们想用IDEA部署启动的话,需要设置Application context设置为/，其实直接访问服务器就是默认访问该项目了。我使用的是在IDEA创建web项目，将打包好的文件放置到项目之中，配置好tomcat服务器运行。之后出现如上的错误。查看网络，发现在请求资源的时候，并没有走项目路径，请求的url应该为。启动tomcat服务器，可以发现项目正常运行了。这里跳过了项目名称，直接进行申请。
element ui vue项目部署到线上, 刷新页面报404
wqhjfree的专栏
08-30 816
element ui vue项目部署到线上, 刷新页面报404 element ui vue项目部署到线上, 刷新页面报404 解决办法如下: 修改nginx配置文件 error_page 404 /404.html文件为 error_page 404 /index.html, 看起来如下 其实就是找不到根目录下的404.html文件, 改为指向index.html ...
vue怎么减少打包后的js、css文件数量
07-11
在Vue中减少打包后的JS和CSS文件数量可以采取以下几种方法： 1. 使用代码分割（Code Splitting）：通过将代码分割成多个小块，可以按需加载所需的模块。Vue提供了动态导入（dynamic import）的语法，可以使用`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值