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

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


问题重现:

vue-cli-service build

image.gif

通过vue-cli-server build打包,将生成的dist目录发布到服务器,通过nginx代理访问,发现样式无效。

image.png

百度寻找解决方案,要么是安装css-loader加载器,要么是修改config/index.js的assetsPublicPath为./

但是我发现本地是正常的,并且测试服务器也是正常的。而且我的css文件是可以正常拉取的,所以并不是路径的问题。在F12发现控制台警告:

image.png

发现提示的很明显, 就是浏览器渲染文件类型的时候出错,应该是css文件来渲染,但是却当成普通文件。

于是,查询了一下Nginx配置发现缺少:

include   mime.types;

image.gif

加上,重启nginx。完美。

备注:

include       mime.types;   #文件扩展名与文件类型映射表
 default_type application/octet-stream   #这是应用程序文件类型的默认值。

image.gif


相关文章
|
4天前
|
JSON 前端开发 JavaScript
CSS模块postcss-modules,在jsx中实现vue里的scoped
CSS模块postcss-modules,在jsx中实现vue里的scoped
|
4天前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
4天前
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
5天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
18 0
|
5天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
11 1
|
5天前
|
域名解析 弹性计算 应用服务中间件
基于nginx反向代理实现OSS固定域名IP访问
本文基于阿里云OSS手册:https://help.aliyun.com/zh/oss/use-cases/use-an-ecs-instance-that-runs-centos-to-configure-a-reverse-proxy-for-access-to-oss,继续深入讨论如何利用nginx反向代理,实现固定的IP/域名访问OSS bucket。官方文档能够解决大部分的反向代理固定IP访问oss bucket的场景,但是对于必须使用域名作为endpoint的系统,会出现signatrue鉴权问题。本文继续在官方文档的基础上,将反向代理需要域名作为endpoint的场景补齐方案。
|
5天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
11 0
|
5天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
14 0
|
5天前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
32 4
|
5天前
|
监控 数据可视化 安全
如何查找访问 Nginx 的前 10 个 IP?
【5月更文挑战第1天】
25 1
如何查找访问 Nginx 的前 10 个 IP?