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


相关文章
|
2月前
|
应用服务中间件 Linux 网络安全
nginx安装部署ssl证书,同时支持http与https方式访问
为了使HTTP服务支持HTTPS访问,需生成并安装SSL证书,并确保Nginx支持SSL模块。首先,在`/usr/local/nginx`目录下生成RSA密钥、证书申请文件及自签名证书。接着,确认Nginx已安装SSL模块,若未安装则重新编译Nginx加入该模块。最后,编辑`nginx.conf`配置文件,启用并配置HTTPS服务器部分,指定证书路径和监听端口(如20000),保存后重启Nginx完成部署。
728 7
|
2月前
|
监控 应用服务中间件 定位技术
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
208 3
|
3月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
228 60
|
3月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
309 60
|
3月前
|
Web App开发 算法 应用服务中间件
nginx开启局域网https访问
【10月更文挑战第22天】为了调试WebRTC功能,需要在局域网内搭建HTTPS协议。具体步骤包括:在已部署Nginx和安装OpenSSL的环境中生成私钥、证书签名请求和自签名证书;将生成的文件放置到Nginx的证书目录并修改Nginx配置文件,最后重启Nginx服务。注意,自签名证书不受第三方机构认可,如需正式使用,需向CA申请签名。
118 2
|
3月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
127 12
|
4月前
|
应用服务中间件 Shell PHP
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
|
5月前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
113 0
|
5月前
|
Ubuntu 应用服务中间件 数据库
Nginx配置:阻止非国内IP地址访问的设置方法
此外,出于用户隐私和法律合规性的考虑,应慎重考虑阻止特定国家或地区IP地址的决策。在某些情况下,这可能被视为歧视性或违反当地法律。
341 2
|
6月前
|
JavaScript 应用服务中间件 PHP
nginx server 禁止特定目录下的某类文件访问
【8月更文挑战第26天】这段Nginx配置代码旨在保护`/uploads/`目录下的文件,禁止执行任何`.php`, `.html`, `.htm`, 或 `.js`等潜在有害文件,即便被访问也无法运行。取而代之的是重定向到首页。为了实现这一设置,用户需要定位到对应子域名的`.conf`配置文件中进行相应修改。若网站支持多个访问域名,则需确保在正确的`.conf`文件中实施此配置。
136 1

热门文章

最新文章