vue 不生效打包样式_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样式不生效的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

本文标题: Vue打包部署到Nginx时,css样式不生效的解决方式

本文地址: http://www.cppcns.com/wangluo/javascript/329941.html

vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式相关推荐

前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...
【CSS样式按钮点击的样式，按钮被点击时的样式】
CSS样式按钮点击的样式,按钮被点击时的样式前言看代码前言按钮点击时的样式,一般都是自定义按钮,修改的是按钮被触发时的样式看代码 <div class="btn"& ...
表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
解决Vue打包部署到Nginx时，css样式不生效问题
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
html网页字段序号的样式,[网页设计]局部自定义li序号CSS样式的方法
想必大家看到过很多网页内容的列表很多都有1.2.3.4....等标记,这是因为li独有的序号标记,默认是一个小圆点,只要用css控制就可以让数字显示出来,除了数字和圆点之外,还有n种格式显示方法,具体 ...
dwcss样式中英对照_DW中常用css样式四种类型详细解析说明
css 样式加载 css 样式类型有以下四种一.外部样式格式: 路径 " /> 举例: 用处:这种形式是把 css 单独写到一个 css 文件内,然后在源代码中以 link 方 ...
html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影男女第一句:act ...

vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式

vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式相关推荐

最新文章

热门文章

vue 不生效 打包 样式_Vue打包部署到Nginx时,css样式不生效的解决方式

vue 不生效 打包 样式_Vue打包部署到Nginx时,css样式不生效的解决方式相关推荐

最新文章

热门文章

vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式

vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式相关推荐