Vue打包部署到Nginx时,css样式不生效的解决方式
更新时间：2020年08月03日 11:29:24 作者：PythonCodeZ
这篇文章主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天在将使用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，发现：
哎呀，这不是前端文件在被浏览器进行渲染的时候，是当做普通文本内容来进行渲染了，并不是按照js、css来进行渲染，是类型的错误，于是乎，翻阅资料，是Nginx配置的问题，只需要在Nginx配置文件中加上以下两行就搞定了问题：
include mime.types;
default_type application/octet-stream;
重启Nginx服务，嗯哼哼，css样式出来了，完事，~~~~~
以上这篇Vue打包部署到Nginx时,css样式不生效的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
今天小编就为大家分享一篇vuex管理状态 刷新页面保持不被清空的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了前端面试之vue2和vue3的区别有哪些，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
在平时vue开发中,我们经常会用到计算属性(计算属性只有在它的相关依赖发生改变时才会重新求值)来计算我们需要的数据,下面这篇文章主要给大家介绍了关于vue中动态参数与计算属性使用的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Vue 封装防刷新考试倒计时组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家介绍了vue响应式Object代理对象的修改和删除属性示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
uniapp Vue3中如何解决web/H5网页浏览器跨域的问题
存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求,同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦,这篇文章主要介绍了在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题,需要的朋友可以参考下2024-06-06
日常开发中,建议用可以用Prettier做代码格式化,然后用eslint做校验,下面这篇文章主要给大家介绍了关于在IDEA中配置eslint和prettier的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了在vue中使用echarts实现飞机航线 水滴图 词云图,通过引入中国地图JS文件，会自动注册地图，文中结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
登录功能对于前端刚入门不久的同学来说较为困难,下面这篇文章主要给大家介绍了关于Vue登录功能实现(含封装axios)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论