草庐IT

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

拄杖盲学轻声码 2023-04-14 原文

【写在前面】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样式加载不了的状况，添加后效果如下。

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

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

项目部多种spanclasstokenvue.jscss前端

有关【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  4. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  5. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  6. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  7. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  8. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  9. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  10. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

随机推荐