解决Vue打包部署到Nginx时,css样式不生效问题

告别Dev模式!手把手教你用Apache Ant打包自定义Drawio并部署到Nginx 本文详细介绍了如何通过Apache Ant工具将定制化的Drawio项目打包,并配置Nginx服务器实现稳定部署。从环境准备、定制开发到Ant打包和Nginx部署,提供全流程实战指南,帮助开发者彻底告别依赖开发模式的临时方案,实现高效生产部署。特别适合需要进行Drawio二次开发的团队参考。 阅读详情
AI摘要

本文分享了在使用Vue-cli编写的前端项目部署到Nginx时遇到的样式加载失败问题及解决方法。作者详细描述了从修改assetsPublicPath配置无效到最终通过调整Nginx配置成功加载样式的全过程。

今天在将使用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',
assetsPublicPath: './',

把assetsPUblicPath修改为 ./

但是,我修改完毕之后呢,还是重新打包前端文件,重启Nginx服务器,但是还是显示不出来样式,不经意的看了一眼浏览器调试工具中的Console,发现:
在这里插入图片描述
哎呀,这不是前端文件在被浏览器进行渲染的时候,是当做普通文本内容来进行渲染了,并不是按照js、css来进行渲染,是类型的错误,于是乎,翻阅资料,是Nginx配置的问题,只需要在Nginx配置文件中加上以下两行就搞定了问题:

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

重启Nginx服务,嗯哼哼,css样式出来了,完事,睡觉~~~~~
在这里插入图片描述

dfasdfsdfasdfasdfsadfsd 搜索。 阅读详情

相关推荐

Vue打包部署到Nginx时,css样式不生效的解决方式

主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue项目build打包后,用nginx代理项目运行样式不生效

原因是我用一个新的nginx配置文件开了一个端口,指向build打包后的vue项目文件,运行起来后页面可以正常打开,但是样式都失效了,F12看样式都没有加载上去。但是正常打包更新到线上的nginx代理没有问题,猜测问题出在nginx配置上,调整了半天才发现是没有配置默认的请求数据流。include mime.types; default_type application/octet-stream;加上这两句,配置完成后,重启nginx,刷新页面样式恢复正常

2201_75875668的博客 1153

R语言生存分析

自己整理编写的R语言常用数据分析模型的模板,原文件为Rmd格式,直接复制粘贴过来,作为个人学习笔记保存和分享。部分参考薛毅的《统计建模与R软件》和《R语言实战》生存分析是研究生存时间的分布规律,以及生存时间和相关因素之间关系的一种统计分析方法。生存分析在医学科学研究中具有广泛而重要的应用价值,它对人群寿命的研究,各种慢性疾病的现场追踪研究,临床疗效试验和动物试验等研究中随访资料的处理骑着举足轻重的作

Tiaaaaa的博客 2万+

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

vue项目部署CSS失效,css样式加载无效,nginx部署css失效,css文件404,服务器样式失效 部署项目css失效

赏樱看雪撸代码 1万+

手把手教你用微信小程序实现智能硬件音视频通话(含Linux/RTOS适配)

本文详细介绍了如何利用微信小程序硬件框架(WMPF)和音视频SDK,在智能硬件(包括Linux与RTOS设备)上实现音视频通话功能。文章从架构设计、设备端SDK集成、小程序VOIP插件开发到跨平台调试与性能优化,提供了全链路实战指南,帮助开发者打通微信小程序与嵌入式设备间的实时音视频通信。

ooo22的博客 331

在MacBook M1/M2上,手把手教你打包包含嵌入模型的RagFlow Docker镜像(避坑指南)

本文详细指导如何在MacBook M1/M2上构建ARM64架构的RagFlow Docker镜像,涵盖环境准备、依赖处理、镜像构建及性能优化全流程。特别针对Apple Silicon芯片的兼容性问题提供解决方案,帮助开发者高效完成本地开发环境搭建。

weixin_26908317的博客 242

前端项目通过nginx无法展示样式

Mooo1s的博客 647

【Pytorch】DCGAN实战(三):二次元动漫头像生成

文章目录1.实现效果2.环境配置2.1Python2.2Pytorch、CUDA2.3Python IDE3.具体实现3.1数据预处理(data.py)(1)导入包(2)定义数据类3.2模型Generator,Discriminator,权重初始化(model.py)(1)导入包(2)Generator(3)Discriminator(4)权重初始化3.3网络训练(net.py)(1)导入包(2)创建类3.4 主函数(main.py)(1)导入文件(2)定义超参数(3)实例化(4)进行训练4.训练过程4.1

qq_44031210的博客 4918

Vue-cli打包线上Nginx访问,css样式无效解决

问题重现: vue-cli-service build 通过vue-cli-server build打包,将生成的dist目录发布到服务器,通过nginx代理访问,发现样式无效。 百度寻找解决方案,要么是安装css-loader加载器,要么是修改config/index.js的assetsPublicPath为./ 但是我发现本地是正常的,并且测试服务器也是正常的。而且我的css文件是可以正常拉取的,所以并不是路径的问题。在F12发现控制台警告: 发现提示的很明显, 就是浏览器渲染...

有一只柴犬的专栏 1977

MMSegmentation 安装教程,避免mmcv不合适版本,及相关问题解决

都行,不做要求。

qq_43683133的博客 1220

Python、Selenium实现问卷星自动填写(内含适配个人问卷的方法)

使用Python、Selenium实现问卷星自动填写,内含适配个人问卷的方法。

DaenCode的博客 3839

vue 不生效 打包 样式_Vue打包部署到Nginx时,css样式不生效的解决方式

今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题:Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的。于是乎,在网上开始寻找资料,发现大部分前辈的解决方案都是在,config的文件夹中的i...

weixin_30350469的博客 1063

使用AI编写测试用例——详细教程

现阶段AI还不能完全替代人工测试用例编写,但如果把AI当做一个提高效率的工具,它将会是一个很强大的辅助。

公众号|软件测试老吴 3万+

Nginx部署Vue项目css文件能加载但是不生效

Nginx部署打包后的Vue项目css文件能加载但是不生效,所以在nginx配置文件上引入一个类型文件就可以。重启nginx后,css文件生效,显示正常了。查看响应标头,发现不对劲,

彭世瑜的博客 940

windows11下pycharm怎么完全卸载?完整卸载pycharm编辑器的教程

在卸载pycharm时都有遇到卸载不干净不完全的问题,那么具体怎样做才能完全卸载pycharm呢?退出所有的操作,重新启动电脑,会发现相关的软件已经被删除了。步骤1:卸载软件并删除安装目录。步骤2:删除相关的注册表。

拥抱具身智能,昇腾Ascend C 1万+

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

Nginx部署Vue项目

Nginx部署Vue项目1、安装NGINX2、部署Vue项目dist静态文件3、该操作过程中,可能出现的问题3.1) 指令重启nginx,还是访问的welcome页面3.2)访问的页面中,CSS样式不生效 1、安装NGINX 下载地址 download 在下载完压缩包后,直接解压即可。启动nginx.exe启动nginx;在浏览器中输入localhost可看到nginx的欢迎界面。 2、部署Vue项目dist静态文件 在解压后,修改nginx.conf配置文件。 server { list

Studious_S的博客 432

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

nginx 引用vue打包的静态文件_nginx部署vue静态文件CSS样式不生效,nginx部署flask接口报错...

Not FoundThe requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.这个是前端接口报错,报错原因是:接口后面少写了一个斜杠"/",加上斜杠就可以正常通过nginx访问了,因为这个原因可把我坑死了,蓝瘦。下面是n...

weixin_39642622的博客 479

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

【Nginx 实战经验】通过 sub_filter 注入外部 CSS,解决跨应用样式修改难题

本文介绍了通过Nginx的sub_filter模块无侵入式修改第三方子应用样式的实战方案。文章详细讲解了配置步骤,包括创建自定义CSS文件、Nginx关键配置(需特别注意CSS访问路径顺序和禁用gzip压缩),以及常见问题的解决方案。该方法无需修改前端代码,适用于iframe嵌入或同源代理的子应用场景,具有全局生效、易维护等优势。文中还总结了5个常见配置陷阱及解决方法,如CSS文件404、样式优先级不足等问题。该方案为跨应用样式修改提供了高效可靠的运维级解决方案。

qq_50733426的博客 717

Vue项目打包部署全攻略:从WebStorm到Nginx的完整实战

前端工程化中,构建与部署是项目从开发走向上线的关键环节,而Vue项目在打包部署时,开发者常因资源路径、服务器配置等问题遭遇白屏或404困境。理解生产构建与开发构建的本质差异,掌握dist目录与publicPath的对应关系,是排查静态资源加载异常的第一步。结合Nginx作为静态服务器和反向代理,可系统解决history模式路由刷新404、API跨域联调等高频故障。本文围绕Node环境确认、WebStorm打包方式选择、publicPath与route base的匹配、Nginx location与proxy

weixin_34130389的博客 367

CSS不起作用也不报错 nginx配置缺失导致

nginx部署前端项目出现css不起作用问题,但不报错

zhangmingyue1226的博客 1326

Vue3+Vite项目打包APK:解决WebView白屏与样式失效的完整指南

移动端混合开发中,将前端项目打包为安卓APK是常见需求,但Vue3 + Vite构建产物与WebView本地加载机制之间存在天然断层,导致白屏、样式错乱频发。Vite默认使用绝对路径资源引用、history路由以及ES Modules加载方式,这些在HTTP服务器上运行良好,却无法适应file协议下的本地资源读取规则。理解base路径与路由模式的原理,成为解决打包问题的关键。通过将base改为'./'、切换至hash路由、合理配置Android WebView的asset加载器,可以有效规避协议差异带来的渲

weixin_30399155的博客 319

Vue项目从零到部署全流程:环境配置、路由与Nginx避坑指南

前端工程化中,项目初始化往往是决定后续开发效率的关键环节。以Vue 3和Vite为代表的现代工具链,依托Node.js环境和npm包管理机制,通过原生ES Module实现秒级冷启动与高效热更新,大幅提升开发体验。合理的脚手架选型、路由设计、状态管理及代理配置,构成了中大型前端应用的工程化基石。在实战场景中,从环境自检、镜像源设置到打包后的资源路径与History路由刷新404问题,每个细节都直接影响线上稳定性。本文从基础概念出发,逐步解析Vue项目从创建、开发调试到Nginx部署的完整链路,帮助开发者绕开

weixin_34014555的博客 190

Spring Boot + Vue前后端分离项目从打包到公网部署全流程实战

前后端分离架构已成为现代Web开发的主流,其部署过程涉及前端静态资源构建、后端服务打包、服务器环境配置及反向代理桥接等多个环节。理解部署的本质,是将本地开发环境“翻译”为生产环境:Vue项目通过构建生成纯静态文件,Spring Boot后端打包为可执行Jar包,而Nginx则扮演关键角色——既托管静态资源,又通过反向代理将API请求转发至后端服务,同时解决路由刷新、跨域和HTTPS配置等难题。掌握这一部署链路,不仅能提升个人项目的上线效率,也是团队协作与DevOps实践的基础。本文以实战经验梳理从打包自测、

weixin_33843409的博客 198

Windows下Nginx部署Vue项目:动静分离与反向代理配置全攻略

在Web前端工程化实践中,静态资源托管与接口请求转发是部署环节的核心命题。Nginx作为高性能的Web服务器,既能高效处理Vue打包后的JS、CSS等静态文件,又能通过反向代理机制解决跨域问题,并以灵活的缓存策略控制资源更新。动静分离的理念,本质上是对不同类型的请求进行分流处理:静态资源享受长缓存加速访问,动态接口通过代理透传保障数据实时性。这一技术在Windows环境下同样适用,只是需要留意路径写法、进程管理、history路由兜底等细节。文章从基础概念入手,结合实际工程场景,梳理出一套完整的Nginx部

weixin_34416754的博客 532
上一篇: Python的各种推导式(列表推导式、字典推导式、集合推导式)
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值