vue项目打包部署后css样式失效

最新推荐文章于 2024-05-16 11:19:02 发布
最新推荐文章于 2024-05-16 11:19:02 发布
阅读量1.3k 收藏
点赞数
文章标签： css vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35673096/article/details/127773135
版权

项目部署后，样式失效，很奇怪，审查元素发现没有样式，不过却加载了css文件，问题出在哪里呢？

 

 

 发现不是路径问题，而是加载的不对，content-type:text-plain,而不是content-type:text/css，没解析出来，最后清缓存

 刷新即可

旋风_小陀螺
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue打包上线之后部分CSS不生效的问题
12-13
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加， minimize:true const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, mini
解决在vue项目中webpack打包后字体不生效的问题
10-18
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli项目打包后样式空白（或者是样式出现一部分）_vue3 构建后部分样式丢失,重新构建后出现
最新发布
2401_84434086的博客
05-16 412
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。很多人踩这个坑的时候花了很多时间，网上的教程基本上都是说的第一个坑，这个坑很少有人提起。这个坑是当你使用了路由之后，
vue项目打包上线后样式不生效
weixin_43838328的博客
09-04 3352
引用 https://blog.csdn.net/qq_41245969/article/details/82900795 将路由(router)先引入，导致自己修改的UI样式不起效果。 import 'element-ui/lib/theme-chalk/index.css' // element样式 import '@/assets/css/reset.css' // 全局或重置样式 ...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
Vue项目打包问题（生产环境样式失效）
m0_49909696的博客
01-06 7783
Vue项目打包问题解决
vue打包后导致css属性值丢失的问题如何处理？
湖北太米网络科技有限公司
11-01 810
当使用Vue进行打包时，有时可能会出现CSS属性值丢失的问题。这通常是由于CSS的压缩和优化过程导致的。下面是一些可能的解决方案：关闭CSS的压缩和优化：在Vue的配置文件(vue.config.js)中，你可以通过添加以下配置来关闭CSS的压缩和优化：module.exports = { css: { ext...
若依部署css样式失效时
csdndd521的博客
02-24 751
需要在vue.conf.js中调下css 添加上就可
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
vue项目打包之后背景样式丢失的解决方案
10-17
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
解决vue+elementui项目打包后样式变化问题
10-15
通过以上这些方法，我们可以有效地解决Vue+ElementUI项目打包后样式变化的问题，确保打包版本与开发版本保持一致，从而提供稳定的用户体验。在开发过程中，定期进行打包检查和调试，有助于及时发现和修复这些问题，...
Vue项目打包部署到iis服务器的配置方法
10-16
主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
【已解决】若依系统前端打包后，部署在nginx上，点击菜单错误：@/views/system/role/index
凯哥Java的博客
01-01 1533
npm run build:prod 命令构建的。# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题。上面错误，是因为@/views/system/role/index动态路由按需加载时候，错误导致。将重新生成的dist文件夹放到nginx上面，然后重新访问。登录，点击菜单就正常了。三、在对应的环境配置文件中添加。二、修改babel.config.js文件。先把该修改的都修改后，在来解决这个问题。配置完成之后，重新安装执行。
解决vue打包之后部分css不生效问题
Wangdr的博客
04-03 8546
用vue的脚手架做前端开发的时候，本地开发所有的样式都能生效，但是打包之后就会有部分样式失效（我遇到的问题是，当内容超过3行的时候，多出部分省略的样式无法添加。），且在浏览器中无法找到该css属性。解决办法如下：首先注释掉webpack.prod.config.js中，下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.bui...
vue项目打包发布，页面出现空白，无法访问css/js文件
anwen743680的博客
11-15 2485
vue项目打包发布，找不到css和js资源
vue项目本地样式正常，部署服务器后出现样式错乱的问题
Harden3的博客
03-23 5405
vue项目本地样式正常，部署服务器后出现样式错乱的问题
解决Vue打包部署到Nginx时，css样式不生效问题
PythonCodeZ的博客
11-12 1万+
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题： Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。 于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹...
vue3打包部署webpack
05-20
在 Vue 3 中，使用 webpack 进行打包部署非常简单，只需要安装好相关依赖，配置 webpack 配置文件即可。 下面是一个简单的 webpack 配置文件示例： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', }), new VueLoaderPlugin(), ], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, }, }; ``` 在上面的配置文件中，我们使用了以下插件和 loader： - `html-webpack-plugin`：用于生成 HTML 文件，并将打包后的 JS 文件自动注入到 HTML 文件中； - `vue-loader`：用于加载和解析 Vue 单文件组件； - `babel-loader`：用于将 ES6+ 语法转换为 ES5； - `css-loader` 和 `vue-style-loader`：用于加载和解析 CSS 样式。 配置好 webpack 后，使用以下命令进行打包： ``` npm run build ``` 打包完成后，生成的文件会被存储在 `dist` 目录下，可以直接将该目录下的文件部署到服务器上。另外，可以使用以下命令启动开发服务器： ``` npm run dev ``` 该命令会启动一个开发服务器，可以在浏览器中访问 http://localhost:9000 进行开发和调试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值