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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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的session功能评述(三)
2006/10/09 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
详解Python进程间通信之命名管道
2017/08/28 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
python3实现简单飞机大战
2020/11/29 Python
生物制药毕业生自荐信
2013/10/16 职场文书
工商局调档介绍信
2015/10/22 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
MySQL开启事务的方式
2021/06/26 MySQL
Python sklearn分类决策树方法详解
2022/09/23 Python