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

 更新时间:2020-08-03 12:06:48   作者:佚名   我要评论(0)

今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题:
Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我

今天在将使用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打包上线之后部分CSS不生效的问题
  • vue项目部署上线遇到的问题及解决方法
  • vue 项目打包时样式及背景图片路径找不到的解决方式
  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

相关文章

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

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

    今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我
    2020-08-03
  • Shell两种for循环对应实现方法解析

    Shell两种for循环对应实现方法解析

    前言:   生产环境中的应用场景:根目录下建立数量不等的目录,挂载不同的硬盘,按sdb-sdn的顺序对应/data2-/datan,就需要for循环嵌套来解决,写成如for i in 1
    2020-08-03
  • Django如何在不停机的情况下创建索引

    Django如何在不停机的情况下创建索引

    该框架在管理数据库更改方面非常强大和有用,但是该框架提供的灵活性受到了一定的限制。为了理解Django迁移的局限性,你将处理一个众所周知的问题:在不停机的情况下
    2020-08-02
  • Flask中sqlalchemy模块的实例用法

    Flask中sqlalchemy模块的实例用法

    一、安装 $ pip install flask-sqlalchemy 二、配置 配置选项列表 : SQLALCHEMY_NATIVE_UNICODE | 可以用于显式禁用原生 unicode 支持。当使用 不合适的指定无编
    2020-08-02
  • Flask缓存静态文件的具体方法

    Flask缓存静态文件的具体方法

    大家好,今天才发现很多学习Flask的小伙伴都有这么一个问题,清理缓存好麻烦啊,今天就教大家怎么解决。 大家在使用Flask静态文件的时候,每次更新,发现CSS或是Js或
    2020-08-02
  • 如何用Anaconda搭建虚拟环境并创建Django项目

    如何用Anaconda搭建虚拟环境并创建Django项目

    一、创建虚拟环境 (1)打开cmd命令窗口 (2)创建虚拟环境 conda create -n mydjango_env (3)查看虚拟环境 conda env list *号表示当前使用的环境 (4)激活创建
    2020-08-02
  • 如何解决flask修改静态资源后缓存文件不能及时更改问题

    如何解决flask修改静态资源后缓存文件不能及时更改问题

    run.py from flask import url_for @app.context_processor # 上下文渲染器,给所有html添加渲染参数 def inject_url(): data = { "url_for": dated_url_f
    2020-08-02
  • 原生js canvas实现鼠标跟随效果

    原生js canvas实现鼠标跟随效果

    本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="ut
    2020-08-02
  • js实现tab栏切换效果

    js实现tab栏切换效果

    本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"
    2020-08-02
  • js实现双色球效果

    js实现双色球效果

    本文实例为大家分享了js实现双色球效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset
    2020-08-02

最新评论