位置: IT常识 - 正文

【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案(vue写css)

编辑:rootadmin
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案

推荐整理分享【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案(vue写css),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目里面css文件放哪里,vue3项目部署,vue3 css,vuejs项目部署,vuejs项目部署,vue项目 部署,vue写css,vue项目css放在哪里好,内容如对您有帮助,希望把文章链接给更多的朋友!

【写在前面】vue3在vscode运行正常、build后在IDEA运行正常,但是当部署在服务器上运行发现样式加载不出来,下面我们针对这些情况进行复现与解决。

一、问题分析

困扰我好久,当即百度原因,百度清一色下面三种情况: 1、nginx配置文件的问题 2、控制台样式404,文件没找到【文件路径错误】 3、样式引入顺序不对存在覆盖 但是我的以上都不是,搞得我头都大,我的居然是java配置拦截的问题;

二、问题解决(多方位解决)

1、nginx配置问题的解决方法是:

找到您服务器上nginx.conf文件,一般在/nginx/conf路径下,编辑该文件,查看一下是否在http的方括号内是否有一下内容,没有的话添加上,有的忽略

include mime.types;default_type application/octet-stream;

这个也是会引发css样式加载不了的状况,添加后效果如下。

【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案(vue写css)

2、控制台样式引入404解决方法

页面是空白,且控制台加载的样式css和js文件都是404状态也,如下: 那么这种情况问题就出现在前端上了,切记排查你前端项目的vue.config.js文件,看看里面的publicPath变量是否写成了’/’,而不是’./’,这里的·是很重要的,意味着表示相对路径,要是没有点的话就是绝对路径(根目录),所以会存在404的问题。修改后如下: 然后修改好后记得重新打包后上传哟!

3、样式文件引入位置先后的问题解决

当然这个是针对很多人说的elementui的引入的问题,说是调整main.js文件引入elementui的css样式的先后顺序,也就是在import App之前加引入,如下所示顺序:

import 'element-ui/lib/theme-chalk/index.css'import App from './App'

但是我自己测试不管在前在后都一样的效果,所以我个人觉得这个作用没啥用。

4、java配置文件拦截问题解决

之前一直把方向定位在nginx和tomcat及vue前端代码上,却忽略了java的拦截,java应该在spring-mvc.xml文件设置放行文件,也就是mvc:resources标签里面应该将css和image、js进行放行,具体根据你的配置来写,我的如下:

<mvc:resources location="/static/css/" mapping="/static/css/**"/><mvc:resources location="/static/img/" mapping="/static/img/**"/><mvc:resources location="/static/js/" mapping="/static/js/**"/>

之前我以为没有用,把它注释了,导致自己花了好一段时间才定位出来,所以大家当出现css在页面上能加载,但是页面样式错乱的情况下,可以自己去想一想是不是java文件没放行的原因,尤其是有些人会写一些doFilter文件做权限控制。

三、搞定收工

最后再将包重新clean-重新打包后,上传到服务器上面,然后再访问您就会发现其实往往更多时候是自己忽略了一些细节,希望我写的记录的能给迷茫的您带来一些帮助哈,喜欢的话可以收藏哟! 如果还没解决您的问题欢迎留言,看到后博主会尽量回复解答,有其他特殊情况也会定期更新解决方案,期待您的来信与留言!!

【写在最后】喜欢博主的话可以给个小爱心哟,我们一起努力,一起加油!!!岁月静好,愿青春温柔以待

本文链接地址:https://www.jiuchutong.com/zhishi/287179.html 转载请保留说明!

上一篇:Adam优化器(通俗理解)(adamax优化器)

下一篇:vue AntD中栅格布局的四种大小xs,sm,md,lg(element栅格布局)

  • 华为mate30pro卡槽在哪里(华为mate30pro卡槽弹不出来)

    华为mate30pro卡槽在哪里(华为mate30pro卡槽弹不出来)

  • 红米9预计发布时间(红米9系列什么时候发布)

    红米9预计发布时间(红米9系列什么时候发布)

  • 滴滴分数低接不到单怎么办(滴滴车主分数低接不到单怎么办)

    滴滴分数低接不到单怎么办(滴滴车主分数低接不到单怎么办)

  • 小爱音箱无法连接蓝牙(小爱音箱无法连接5gwifi)

    小爱音箱无法连接蓝牙(小爱音箱无法连接5gwifi)

  • 普通耳机一般能用多久(普通耳机可以用多久)

    普通耳机一般能用多久(普通耳机可以用多久)

  • oppoa57t是全网通手机吗

    oppoa57t是全网通手机吗

  • 芯片和处理器的区别(芯片处理器的发展)

    芯片和处理器的区别(芯片处理器的发展)

  • 闲鱼交易待结算冻结什么意思(闲鱼交易待结算冻结)

    闲鱼交易待结算冻结什么意思(闲鱼交易待结算冻结)

  • 苹果8plus支持18w快充吗(苹果8plus支持20w快充吗)

    苹果8plus支持18w快充吗(苹果8plus支持20w快充吗)

  • mpg4格式是什么意思(mpg格式是什么格式)

    mpg4格式是什么意思(mpg格式是什么格式)

  • 电脑耳机连麦对方听不见声音(电脑耳机连麦对方听不到)

    电脑耳机连麦对方听不见声音(电脑耳机连麦对方听不到)

  • airpods拍照声音突然变大(airpods拍照时声音变大)

    airpods拍照声音突然变大(airpods拍照时声音变大)

  • 笔记本电脑掉帧是什么原因(笔记本电脑掉帧怎么解决)

    笔记本电脑掉帧是什么原因(笔记本电脑掉帧怎么解决)

  • tas-an00是什么型号(tas an00什么型号)

    tas-an00是什么型号(tas an00什么型号)

  • 手机imei是什么意思啊(苹果手机imei查询)

    手机imei是什么意思啊(苹果手机imei查询)

  • 小米手环4充满要多久(小米手环4充满电会提示吗)

    小米手环4充满要多久(小米手环4充满电会提示吗)

  • 多媒体是以什么形式存在(多媒体是以什么形式存储的)

    多媒体是以什么形式存在(多媒体是以什么形式存储的)

  • 苹果手机照片放大镜怎么点出来(苹果手机照片放大镜功能在哪里)

    苹果手机照片放大镜怎么点出来(苹果手机照片放大镜功能在哪里)

  • 小米手机后盖怎么打开(小米手机后盖怎么换)

    小米手机后盖怎么打开(小米手机后盖怎么换)

  • 苹果11通知栏怎么设置(苹果11通知栏怎么点进去)

    苹果11通知栏怎么设置(苹果11通知栏怎么点进去)

  • 合同怎么扫描给对方(合同怎么扫描给对方看)

    合同怎么扫描给对方(合同怎么扫描给对方看)

  • 手机怎样ps照片(手机怎么ps照片)

    手机怎样ps照片(手机怎么ps照片)

  • opporeno录屏怎么把语音录进去(opporeno录屏怎么打开)

    opporeno录屏怎么把语音录进去(opporeno录屏怎么打开)

  • qq动态密码怎么解除(qq动态密码怎么查看)

    qq动态密码怎么解除(qq动态密码怎么查看)

  • 荣耀note10防水吗(荣耀note10防水吗?)

    荣耀note10防水吗(荣耀note10防水吗?)

  • 动态路由协议RIP的详细配置全过程(动态路由协议rip配置实验心得)

    动态路由协议RIP的详细配置全过程(动态路由协议rip配置实验心得)

  • 显卡是4G的1050TI好还是3G的1060好(1050ti 4g显卡)

    显卡是4G的1050TI好还是3G的1060好(1050ti 4g显卡)

  • ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因(vue-cli-service权限不够)

    ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因(vue-cli-service权限不够)

  • 商品批发企业进项税额会计分录
  • 个税隔一个月没申报这个月可以补上吗
  • 小规模纳税人季报是哪几个月
  • 小企业固定资产折旧的账务处理
  • 未能及时取得成功的成语
  • 半成品报废账务处理
  • 调整以前年度多计提的工资
  • 公司购买商品房契税税率
  • 幼儿园幼儿买花的通知
  • 公司预存话费应该怎么做会计处理?
  • 调增应纳税所得额
  • 私人帐户可以给别人用吗
  • 自然人股权转让涉税信息怎么填
  • 劳务费增值税发票是劳务单位开吗
  • 食堂伙食费怎么入账
  • 部队属于企事业单位吗
  • 国税2017年16号文
  • 收到的税收返还包括
  • 没发票大额费用支出能税前扣除吗?
  • 完税证明已开回怎么处理
  • 出口50万货物退多少税
  • 交通费进项税抵扣计算
  • 固定资产投资增值税进项税额抵扣规定
  • 怎么进行现金流量分析
  • 外地预缴增值税可以抵本地增值税
  • php socket函数
  • 虚拟机安装apache
  • 社保退休金计算方法
  • 总部资产的减值有什么特点
  • 会计中的计算公式
  • 小规模纳税人查询
  • 空调维修费进什么会计科目
  • Joomla调用系统自带编辑器的实现方法
  • 个人所得税的现状分析
  • gpt-3的功能
  • 大前端技术
  • vue前端项目实战
  • 生育保险具体待遇是什么
  • 错开、补开发票问题
  • 合伙 利润分配
  • 可转债公允价值变动计入
  • 达到规定数量赠送实物,如何开票
  • 新注册企业实收资本没到账怎么处理
  • 银行存款存款单丢了怎么办
  • mysql数据库三种复制类型
  • 企业其他应收款包括哪些
  • 不动产经营租赁发票开具注意
  • 什么叫金税四期呢?
  • 暂估成本分录怎么写
  • 物业管理单位收取的物业费征不征收增值税
  • 提取备用金现金流量如何填写
  • 存货有哪几个科目
  • 广告发布费属于什么费用
  • 公司买东西算什么费用
  • 购入汽车属于什么会计科目
  • 税控开具发票
  • mysql删除表数据怎么恢复
  • 软件源推荐
  • win7任务栏快捷启动如何设置
  • win7系统咋样
  • Win10 64位系统下火狐浏览器打开带flash网页卡死的解决方法
  • linux系统的服务器有哪些
  • Win10 Mobile RS1预览版14267.1004升级过程截图
  • linux搭建chia
  • qt_5 not found
  • android pageview
  • xcode用法
  • 了不起的狐狸爸爸
  • jquery日期插件
  • JavaScript中的变量名不区分大小写
  • js如何封装
  • python2设置环境变量
  • 广西地税局局长
  • 电子税务局申领的发票怎么读入金税盘
  • 办理对外支付税务备案需要多久时间
  • 税务稽查总队
  • 车辆购置税完税证明有用吗
  • 纳税人不办税务许可证
  • 天猫主体变更是什么意思
  • 社保uk申请流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设