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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
JS定时器实例
Apr 17 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
详解如何较好的使用js
Dec 16 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
jQuery实现鼠标滑动切换图片
May 27 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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JSONP基础知识详解
2017/03/19 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
通过C++学习Python
2015/01/20 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python实现维吉尼亚算法
2019/03/20 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
internal修饰符起什么作用
2013/12/16 面试题
尊师重教演讲稿
2014/09/04 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
后天观后感
2015/06/08 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书