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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
js实现tab切换效果实例
Sep 16 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
PHP排序算法类实例
2015/06/17 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
用js遍历 table的脚本
2008/07/23 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python循环输出三角形图案的例子
2019/11/22 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
PHP面试题附答案
2015/11/28 面试题
公司前台辞职报告
2014/01/19 职场文书
初三开学计划书
2014/04/27 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014财务年度工作总结
2014/11/11 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
消防演习通知
2015/04/25 职场文书
python - timeit 时间模块
2021/04/06 Python
vue+springboot实现登录验证码
2021/05/27 Vue.js
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL