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

赞 (0)

相关推荐

  • 解决Vue打包上线之后部分CSS不生效的问题

    首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加, minimize:true const cssLoader = { loader: 'css-loader', option

  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • 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, '../

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • vue项目部署到nginx/tomcat服务器的实现

    开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署. 1.router(history)模式vue项目部署到nginx 1)修改router模式为history(默认为hash) const router = new VueRouter({ routes, mode: 'history' }); 对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解 2)修改config/ind

  • Vue 打包的静态文件不能直接运行的原因及解决办法

    问题 吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的.然而在使用 npm run build 打包项目时,却发现打包好的项目在浏览器中直接打开好像什么都没有? 原因 查看了一下打包后的 index.html 源码,终于发现了一个重要的点: 所有涉及到路径的地方全都是以 / 开头的 下面是吾辈打包后生成的 dist 目录 dist:. │ index.html │ └─static ├─css │ app.b7bce283257fbd427fb1dc3fea80cee

  • Vue单页应用引用单独的样式文件的两种方式

    Vue单页应用引用单独的样式文件的两种方式

    问题描述 对于.vue的文件来说,也是由结构.行为.样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式.下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分 引入单独的样式文件 方式一 在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享 // The Vue build version to loa

  • 小程序自定义组件全局样式不生效的解决方法

    小程序自定义组件全局样式不生效的解决方法

    目录 太长不看版 组件样式隔离 demo 试验 优先级 页面的隔离配置 参考资料 在使用原生框架开发小程序时遇到一个问题,在 app.wxss 中定义的全局样式在自定义组件中不生效.后来发现是由于小程序组件样式隔离的配置导致的. 太长不看版 在组件的 json 文件中添加如下配置,全局样式即可生效. // component.json "styleIsolation": "apply-shared" 如果偏好在 js 文件中进行配置,或版本号 < 2.10.1

  • vue.js 子组件无法获取父组件store值的解决方式

    子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s

  • keras load model时出现Missing Layer错误的解决方式

    问题描述:训练结束后,保存model为hdf5和yaml格式的文件 yamlFilename = os.path.join(dir,filename) yamlModel = model.toyaml() with open(yamlFilename, "w") as yamlFile: yamlFile.write(yamlModel) 随后load model with open(chkptFilename,'r') as f: model_yaml = f.read() mode

  • elementui的el-popover修改样式不生效的解决

    elementui的el-popover修改样式不生效的解决

    在使用element-ui的时候,有一个常用的组件,那就是el-popover,但是element-ui官方文档中样式跟用法都比较局限,在使用时都需要改动样式 项目中使用了el-popover,但是想修改一下样式,一直不成功,先来看一下官方文档怎么说的 添加一个类名,string类型,ok,添加一个 <el-popover placement="right" width="400" trigger="hover" popper-class=

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

随机推荐