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 相关文章推荐
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
Jquery注册事件实现方法
May 18 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
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
php4的彩蛋
2006/10/09 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python通过索引遍历列表的方法
2015/05/04 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
python多进程实现文件下载传输功能
2018/07/28 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
后勤岗位职责
2013/11/26 职场文书
校园环保建议书
2014/05/14 职场文书
社会实践活动总结范文
2014/07/03 职场文书
幸福来敲门观后感
2015/06/04 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android