解决Vue打包上线之后部分CSS不生效的问题

最新推荐文章于 2024-12-14 15:58:07 发布
原创 最新推荐文章于 2024-12-14 15:58:07 发布 · 6.4k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #javascript #前端

本文主要讲述Vue开发中本地样式正常，但打包后部分样式失效的问题。经排查，问题可能出在打包生成的样式集成上。文中给出了几种解决方案，如排查页面scoped属性、使用/deep/或!important、调整main.js样式引入顺序，若都不行还可通过id绑定修改优先级。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用vue开发的时候，本地开发所有的样式都能生效，但是打包之后就会有部分样式失效，且在浏览器中F12得时候那个属性值并没有变化。

我这边出现的问题是F12走查发现影响的css样式来自static\css\chunk-4be4624ac.css是通过打包生成的。所以判断是打包生成样式集成有部分影响到了。

有以下方案都可以试下

1 .首先需要排查各个页面的是否加入scoped属性

          css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化

2./deep/ 或者是 !important

  /deep/,给这个类名改变样式,这样如果页面出现多个同样的组件,不会导致页面样式混乱,改变之后的样式是这样的

 !important，作用是提高指定样式规则的应用优先权（优先级）

3.main.js样式引入顺序问题

          有时候我们发现组件内的样式没有生效，可能是被第三方组件样式覆盖了，main.js中引入router放在最后，就可以实现组件样式在第三方样式之后渲染。

4.出现这个问题以上方法我都试过还是不行！所以我直接通过id来绑定修改优先级高

 

唔希波西
关注
Vue项目打包问题（生产环境样式失效）
m0_49909696的博客
01-06 1万+
Vue项目打包问题解决
Vue 组件封装为 Web Components 样式不生效解决方案
最新发布
weixin_45636416的博客
06-09 803
在配置 Vue 插件时，开启全局 customElement 编译模式：import { defineConfig } from 'vite'plugins: [vue({})})之后所有.vue文件都以 customElement 模式编译，注册的组件样式都会注入到 Shadow DOM。
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
解决vue打包之后部分css不生效问题
Wangdr的博客
04-03 8767
用vue的脚手架做前端开发的时候，本地开发所有的样式都能生效，但是打包之后就会有部分样式失效（我遇到的问题是，当内容超过3行的时候，多出部分省略的样式无法添加。），且在浏览器中无法找到该css属性。解决办法如下：首先注释掉webpack.prod.config.js中，下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.bui...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
10-16
在开发基于Vue.js的项目时，常常会遇到各种问题，特别是在使用像iview这样的UI库进行打包上线后。本文主要关注的是一个常见的问题——图标不显示。这个问题在使用vue-cli和iview构建的项目中尤为突出，主要是由于...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。其次，确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地...
vue动画打包后失效问题的解决方法
10-18
总结起来，解决Vue动画打包后失效的问题，主要是调整`vue-loader.conf.js`中的`extract`配置，以及检查CSS代码的正确性。同时，合理优化项目结构和利用Vue的特性，可以避免性能损失并确保动画效果的完美呈现。在实际...
vue项目打包部署到nginx后css样式失效
weixin_64021358的博客
12-14 1857
vue项目部署到nginx后css样式失效问题、原因与解决方案
vue项目打包后样式css失效不生效
weixin_28686261的博客
05-08 2671
在本地开发的时候还没问题，不管是写在全局还是scoped里面，但打包完到dev或者master环境就不行了 看下main.js的导入顺序，要把router放在样式的后面
Vue打包部署到Nginx时,css样式不生效的解决方式
11-19
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题： Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。 于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹中的index.js assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPubli
vue项目打包部署后css样式失效
qq_35673096的博客
11-09 1652
发现不是路径问题，而是加载的不对，content-type:text-plain,而不是content-type:text/css，没解析出来，最后清缓存。项目部署后，样式失效，很奇怪，审查元素发现没有样式，不过却加载了css文件，问题出在哪里呢？
解决Vue打包上线之后部分CSS不生效
mo_jiu的博客
10-26 1万+
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加，...
vue-解决Vue打包上线之后部分CSS不生效的问题
cxu123321的博客
12-24 1928
解决Vue打包上线之后部分CSS不生效的问题 更新时间：2019年11月12日 15:16:16 作者：墨咎 我要评论 今天小编就为大家分享一篇解决Vue打包上线之后部分CSS不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 首先注释掉webpack.prod.conf.js中下面的代码 ? 1 2 3 4 ...
vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题
weixin_29358723的博客
08-03 2826
解决Vue打包上线之后部分CSS不生效的问题首先注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),然后在utils.js中...
vue 中修改css样式不生效
xjh的博客
08-16 1500
修改css不生效 使用 !important也不生效时 使用 /deep/ /deep/#qrcode{ width:200px; }
vue中css样式不生效的原因及解决方式
热门推荐
weixin_46446967的博客
09-15 3万+
相信有很多小伙伴入门使用组件库时,设置样式不生效,下面分析一下为什么出现这种问题,以及解决方式 我们在使用vue开发时,在style中加入scoped
Vue css 打包报错
bamboolm的博客
08-22 1362
Vue css样式错误 打包失败
vue项目上线
05-21
### Vue 项目上线部署配置教程 #### 一、前端项目的准备工作 在将 Vue 项目部署到生产环境中之前，需要完成一系列的前置工作。以下是详细的步骤： 1. **配置反向代理解决跨域问题** 需要在 `vue.config.js` 文件中设置开发服务器的代理规则，以便解决前后端分离时可能存在的跨域请求问题。通过定义 `/api` 或其他自定义路径作为代理前缀，可以将前端请求转发至后端服务[^2]。 ```javascript const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { "/api": { target: "http://backend-server-url", // 替换为实际的后端 URL 地址 changeOrigin: true, // 允许跨域请求 }, }, }, }); ``` 2. **调整路由模式** 如果使用的是 `history` 模式的路由，在生产环境下可能会导致页面刷新时报错。因此建议切换为 `hash` 模式，并指定基础路径以匹配 Nginx 的静态资源映射规则[^3]。 ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ mode: 'hash', base: '/usr/local/blog/client/dist/', // 生产环境的基础路径 routes: [ // 定义路由规则... ], }); ``` --- #### 二、构建与打包 为了优化性能并减少体积，需对 Vue 项目进行构建和压缩操作。 1. **运行构建命令** 使用以下命令生成用于生产的静态文件： ```bash npm run build ``` 构建完成后会在项目根目录下生成一个名为 `dist` 的文件夹，其中包含了所有的静态资源文件（HTML、CSS 和 JavaScript）以及图片等资产文件。 2. **上传静态资源** 将 `dist` 文件夹中的内容复制到目标服务器上的指定位置，例如 `/usr/local/webserve/static/` 目录下[^4]。 --- #### 三、Nginx 配置 为了让用户能够访问已部署的应用程序，还需要正确配置 Web 服务器（如 Nginx），使其能加载这些静态文件并将 API 请求重定向给后端服务。 1. **安装 Nginx** 在 CentOS 系统上可以通过如下方式快速安装 Nginx[^4]: ```bash sudo yum install epel-release -y sudo yum install nginx -y systemctl start nginx systemctl enable nginx ``` 2. **编辑 Nginx 配置文件** 修改默认站点配置文件（通常位于 `/etc/nginx/conf.d/default.conf` 或者创建一个新的 `.conf` 文件），添加类似下面的内容来支持 Vue 应用: ```nginx server { listen 80; server_name your-domain.com; root /usr/local/webserve/static; # 设置静态资源路径 index index.html; location / { try_files $uri /index.html; # 支持单页应用 (SPA) } location /api/ { proxy_pass http://backend-server-url/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 此处需要注意两点：一是确保 `root` 参数指向了正确的静态文件存储位置；二是对于涉及后端接口调用的部分应单独设立代理规则[^3][^4]。 3. **重启 Nginx** 更改完毕之后记得重新启动 Nginx 来使新设定生效： ```bash systemctl restart nginx ``` --- #### 四、测试与验证 最后一步就是确认整个流程无误——打开浏览器输入域名地址查看首页是否正常显示，尝试点击链接跳转不同页面以及提交表单等功能交互行为均按预期运作即可认为成功完成了部署过程。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值