【前端】【vue】【nginx】nginx部署vue的坑——页面图片不显示

已于 2024-09-12 17:28:50 修改
阅读量3.4k 收藏 1
点赞数
分类专栏： 服务器部署问题 文章标签： Vue Nginx 图片代理 路径冲突 前端部署
于 2021-08-30 16:21:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42479293/article/details/119999587
版权

描述：在使用nginx部署vue项目时，在nginx上给服务器图片配了一个代理/img/，项目启动后服务器地址的图片没有问题，但是在项目静态资源的图片不显示，路径都对。

原因：项目图片资源路径也是/img/开头的，应该是这两种访问重复了，导致找不到图片。

解决办法：为了方便我将服务器那个名称换了一个，完成。

vue打包部署到nginx后,后端返回的图片不显示
g56467467464的博客
05-06 1220
需要以网络图片形式加载 this.getRequest( "/video/page?current=" + this.currentPage + "&size=" + this.pageSize + "&name="+this.keywords ).then((resp) => { this.tableLoading = false; if (resp && resp.status == 200)
nginx 访问图片404_nginx发布vue 项目
weixin_39737492的博客
11-20 520
在本次使用nginx发布vue项目遇到 配置location 始终404 和 在项目子目录点击浏览器刷新出现404问题使用nginx发布vue项目，为了方便测试就下载了一个nginx 放置自己目录下nginx目录是这样的一、配置端口然后打开conf / nginx.conf 配置 server，首选监听808 设置服务名 listen 808; server_name ...
nginx 解决vue打包后显示404静态图片无法显示的问题
最新发布
初遇你时动了情
08-29 238
【代码】nginx 解决vue打包后显示404静态图片无法显示的问题。
解决nginx服务器图片（js/背景图片）不能显示问题
热门推荐
行路中
09-17 2万+
nginx网站服务器不显示图片，解决办法！ 修改nginx.conf文件，加入： location ~* ^.+\.(jpg|jpeg|gif|png|bmp)$ { access_log off; root '此处为您的网站路径';  expires 30d; break; } 原文出处http://dfreedom.net/2011/12/debian-nginx-image
《HCIP-openEuler实验指导手册》1.6 Apache静态资源配置（目录访问）
xzzteach的博客
04-26 590
在Linux系统中永久关闭SELinux的方法是修改SELINUX的配置文件，将SELINUX=enforcing改为SELINUX=disabled，然后保存退出并重启系。SELINUX=enforcing #selinux开启，级别为强制(华为openEuler系统选择服务server方式安装时默认为开启)SELINUX=permissive #selinux开启，级别为警告。按3个方向排查：一是Selinux；SELINUX=disabled #selinux关闭。
ruoyi-vue前后端分离框架上传图片不显示问题，nginx解决方案
ytgytg28的博客
10-24 3783
使用若依前后端分离框架，前端项目打包在Nginx,上传图片时，图片上传成功，但是在列表页和添加/修改页面没有正常显示。解决办法：nginx.conf在location中添加alias。这时候就能正常访问到图片，可以正常显示了。alias 作用是将url路径中的。注意字后的斜杠 (/)不能省略。此时样式是打不开的，无法找到路径。域名/ip+端口号+匹配到的内容。alias后面设定的内容。
解决部署vue2项目到nginx后图标不显示的错误
weixin_50117748的博客
09-13 1307
以解决部署vue2项目到nginx后图标不显示，控制台报此错Uncaught SyntaxError: Unexpected token ‘＜‘
NGINX + VUE 无法展示图标 问题解决
Deadeyess的博客
08-16 1000
【代码】NGINX + VUE 无法展示图标 问题解决。
vue解决打包部署到nginx中icon图标不显示的问题
weixin_44006009的博客
11-06 655
vue nginx 部署 icon图标 不显示
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 1809
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 #### 一、Nginx 概述 Nginx 是一款广泛使用的高性能 HTTP 和反向代理 web 服务器。它以其出色的并发处理能力和较低的内存消耗而闻名。根据相关报告，Nginx 能够支持高达 50,000 ...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
在使用nginx部署Vue项目时，有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法，主要包括vue-cli@3的配置方式和vue-...
fastadmin+vue nginx部署
01-07
# 疫情管控 server { listen 80; #server_name ; index index.php index.html index.htm default.php default.htm default.html; root /var/... location /fe{ ...-e $request_filenam
Vue项目部署Nginx配置文件 SSL
08-11
Vue.js 是一个流行的前端开发框架，用于构建交互式的单页应用程序（SPA）。当你的 Vue 项目完成开发并经过 `npm run build` 编译后，生成的静态资源需要部署到服务器上供用户访问。Nginx 是一款高性能的 HTTP 和反向...
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
m0_61068496的博客
04-21 2767
以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）
qq_45796592的博客
09-26 1万+
nginx部署前端项目的详细步骤
vue3项目本地src图片渲染不显示问题
weixin_58149434的博客
11-10 1909
解决vue3+vite项目中图片不显示问题
Vue前端部署：详解Nginx配置与步骤
本文档主要介绍了如何在Vue前端项目中部署使用Nginx进行静态资源托管。部署流程主要包括以下几个步骤： 1. **确认Nginx配置完毕**：首先，确保Nginx服务器已经正确安装并配置好，通常情况下，Nginx作为反向代理...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值