vue项目build打包后，用nginx代理项目运行样式不生效

最新推荐文章于 2024-06-13 17:17:31 发布
最新推荐文章于 2024-06-13 17:17:31 发布
阅读量559 收藏
点赞数
文章标签： vue.js 前端 javascript nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75875668/article/details/134426375
版权

原因是我用一个新的nginx配置文件开了一个端口，指向build打包后的vue项目文件，运行起来后页面可以正常打开，但是样式都失效了，F12看样式都没有加载上去。

但是正常打包更新到线上的nginx代理没有问题，猜测问题出在nginx配置上，调整了半天才发现是没有配置默认的请求数据流。

include       mime.types;
default_type  application/octet-stream;

加上这两句，配置完成后，重启nginx，刷新页面样式恢复正常

01小白1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 项目部署到 Nginx 服务器是将构建后的静态资源发布到 Nginx 服务器上，以便通过 Nginx 提供服务。 1. **Nginx 安装与基本操作** - Nginx 是一款高性能的 HTTP 和反向代理服务器，可以在多种操作系统上运行...
nginx部署vue项目
01-20
在本文中，我们将深入探讨如何使用Nginx部署Vue.js项目。Vue.js 是一个流行的前端JavaScript框架，而Nginx则是一个高效的Web服务器，常用于处理静态资源和反向代理。我们将按照步骤来讲解如何打包Vue项目并将其部署...
Nginx部署Vue项目css文件能加载但是不生效
最新发布
彭世瑜的博客
06-13 437
Nginx部署打包后的Vue项目css文件能加载但是不生效，所以在nginx配置文件上引入一个类型文件就可以。重启nginx后，css文件生效，显示正常了。查看响应标头，发现不对劲，
Vue打包部署到Nginx时,css样式不生效的解决方式
11-19
今天在将使用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', assetsPubli
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84435838的博客
05-08 2025
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
解决Vue打包部署到Nginx时，css样式不生效问题
PythonCodeZ的博客
11-12 1万+
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题： Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。 于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
Vue项目打包问题（生产环境样式失效）
m0_49909696的博客
01-06 7944
Vue项目打包问题解决
vue打包到生产环境页面样式无效
weixin_42091247的博客
07-01 3338
生产环境打包上线时页面样式无效，但测试服务正常 页面提示 Resource interpreted as Stylesheet but transferred with MIME type application/x-css 访问页面时css文件可以加载出来，但是样式无法生效 测试： 正式： 对比发现css文件的Content-Type变为了application/octet-stream 稍微了解一下,问题就知道出在哪里了 application/octet-stream 这是应用程序文件的默
nginx中部署vue项目，以及配置后台反向代理和图片回显功能
weixin_59244784的博客
04-28 1722
nginx中部署vue项目，以及配置后台反向代理和图片回显功能
解决Vue打包上线之后部分CSS不生效的问题
12-13
首先注释掉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', options: { sourceMap: options.sourceMap, mini
解决vue打包项目后刷新404的问题
11-26
在Vue.js应用开发中，当我们使用`npm run build`命令将项目打包成生产环境的静态资源时，可能会遇到一个问题：用户在访问应用时，如果直接刷新页面或通过URL链接进入，浏览器会返回404错误。这是因为Vue.js采用的是...
VuePress打包后没有样式或者没有图片或者js加载失败
qq_53679247的博客
04-25 1432
VuePress打包后没有样式或者没有图片或者js加载失败
关于Vue项目build后样式失效问题
weixin_40538702的博客
08-11 1661
Vue项目打包后样式失效问题解决
vue项目打包部署后css样式失效
qq_35673096的博客
11-09 1331
发现不是路径问题，而是加载的不对，content-type:text-plain,而不是content-type:text/css，没解析出来，最后清缓存。项目部署后，样式失效，很奇怪，审查元素发现没有样式，不过却加载了css文件，问题出在哪里呢？
修改element UI中的默认样式 使用vue2+webpack打包后无效
weixin_34121304的博客
07-03 327
修改element UI中的默认样式 使用vue2+webpack打包后无效的原因是因为先加载修改之后的样式，后加载UI框架的样式， 所以修改的样式被覆盖。引入组件的顺序如图即便解决。 ...
vue 解决打包后element 自定义样式无效的解决方案
前端小菜鸡的博客
08-02 3287
第一个方法： 就是在template的根节点，也就是第一个div添加一个类名classname .el-tabs__item.is-active 这个是elment自带的，如果需要更改直接f12,把类名复制下来， 具体为： .classname .el-tabs__item.is-active{ background:rgb(66,127,253) ; } 有方法会随时更新 ...
vue打包后部署nginx
05-01
Vue是一款流行的JavaScript框架，用于构建Web应用程序。为了使应用程序在生产环境中运行，需要对其进行打包，并将打包后的文件部署到Web服务器上。本文将介绍如何使用Nginx来部署Vue应用程序。 首先，需要安装Nginx服务器。在Linux系统上，可以使用以下命令进行安装： ``` sudo apt-get update sudo apt-get install nginx ``` 安装完成后，需要将Vue应用程序打包为静态文件，并将其放置在Nginx服务器的根目录下。可以使用以下命令进行打包： ``` npm run build ``` 这将在项目根目录下创建一个名为“dist”的文件夹，其中包含打包后的静态文件。将“dist”文件夹复制到Nginx服务器的默认根目录“/var/www/html”下。 接下来，需要编辑Nginx的配置文件以指向Vue应用程序的入口文件。默认情况下，Nginx的配置文件位于“/etc/nginx/nginx.conf”路径下。 打开配置文件并添加以下内容： ``` server { listen 80; server_name example.com; # 将example.com替换为你的域名 root /var/www/html/dist; # 将dist目录替换为你的Vue应用程序目录 index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 该配置文件将Nginx服务器的根目录指向Vue应用程序的入口文件“index.html”。 保存并关闭配置文件后，需要重新启动Nginx服务器以使更改生效。可以使用以下命令重启Nginx： ``` sudo systemctl restart nginx ``` 完成以上步骤后，Vue应用程序已经可以在Nginx服务器上运行。现在可以使用浏览器访问Nginx服务器的IP地址或域名来查看Vue应用程序。 综上所述，使用Nginx部署Vue应用程序的过程大致分为三步：安装Nginx服务器、将Vue应用程序打包为静态文件并复制到Nginx服务器的根目录下、编辑Nginx的配置文件将其指向Vue应用程序的入口文件。完成以上步骤后，Vue应用程序将成功部署在Nginx服务器上，用户可以通过浏览器访问该应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值