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


Posted in Javascript onAugust 03, 2020

今天在将使用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,发现:

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

哎呀,这不是前端文件在被浏览器进行渲染的时候,是当做普通文本内容来进行渲染了,并不是按照js、css来进行渲染,是类型的错误,于是乎,翻阅资料,是Nginx配置的问题,只需要在Nginx配置文件中加上以下两行就搞定了问题:

include mime.types;

default_type application/octet-stream;

重启Nginx服务,嗯哼哼,css样式出来了,完事,~~~~~

以上这篇Vue打包部署到Nginx时,css样式不生效的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
javascript简单链式调用案例分析
May 10 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
javascript运行机制之执行顺序理解
Aug 03 #Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 #Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 #Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 #Javascript
You might like
php curl post 时出现的问题解决
2014/01/30 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js 通用订单代码
2013/12/23 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
js选择器全面解析
2016/06/27 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
wxPython色环电阻计算器
2019/11/18 Python
python循环输出三角形图案的例子
2019/11/22 Python
python pygame实现球球大作战
2019/11/25 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
教师考核评语
2014/04/28 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers