vue 静态资源部署 nginx ，同时配置代理，踩坑记录

最新推荐文章于 2024-05-12 19:23:22 发布
最新推荐文章于 2024-05-12 19:23:22 发布
阅读量3.4k 收藏 6
点赞数 1
分类专栏： vue 文章标签： vue nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010883376/article/details/106302829
版权

   这天想把vue项目打包放nginx静态资源，然后能代理访问另一个ip的api，记录一下配置的坑。

   之前没用过nginx，配置的时候就照着网上搞，结果搞了个把小时才配置对。具体过程不详细说了，直接说配置会有什么效果，如果有错误欢迎大佬指正。

最终期望效果是这样，访问nginx：10.0.0.7/cmtPro/ 可以访问到静态资源。然后请求能够代理请求到另一个ip的接口。

 最开始我 测试配置 类似这样的：这样预期的效果是 10.0.0.7/cmtPro2/ 能够访问资源

图一：

图二：这是资源路径

 图中红框配置，结果访问地址 10.0.0.7/cmtPro2/ 发现不能访问，查看日志可以发现

访问的路径是 root 加上 location，就是这个/home/nginxWeb/cmtPro/cmtPro/2index.html 地址了，查看图二可以发现路径下面没有这个cmtPro2文件夹，那这里大家应该就明白该怎么配置了。

正确配置：</

最低0.47元/天 解锁文章
每次取昵称想半天不想了
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目代理配置+使用nginx部署的请求代理配置
weixin_44394319的博客
02-22 3351
由于vue项目的前后端分离，代码里的请求基本上都会涉及跨域，所以有必要在项目中配置代理地址。如果是使用nginx部署前端项目，而接口是运行在其他服务上的，那么nginx同样也需要配置代理，当然，如果前端项目跟接口是运行在同一个服务上，这种情况就只需要配置开发环境就行。 以下是使用nginx部署打包好的vue项目，而后端接口使用其他服务部署的vue配置以及nginx配置 开发环境 1. 使用vue-cli2版本创建的vue项目 在 config/index.js 文件内配置以下代码 module.export
Vue项目部署Nginx配置文件 SSL
08-11
Vue项目结果build编译后，放在Nginx的html文件夹内，替换该配置文件，就可以在Nginx服务器上运行Vue项目
vue项目上线nginx服务器时的代理问题
luo1914_的博客
04-15 661
今天就来谈谈vue项目上线nginx服务器时我踩过的坑，希望大家看完可以少走弯路！！！ 1.首先，我们在本地开发的时候，假如我们的项目用到别人的接口，但是请求跨域了，那我们就需要使用代理，而在vue的配置文件vue.config.js中，我们写的接口代理有两种模式，如下： module.exports = { devServer: { proxy: { "/info...
2024年前端最全vue项目如何部署到nginx服务器，2024年最新被面试的公司拒绝了,还能再去要求面试吗
最新发布
2401_84619986的博客
05-12 1209
wq。
vue的代理和nginx代理
weixin_52293201的博客
07-15 836
上面这个代理的意思是当我们从浏览器中访问应该url这个url中有 /api/v1 就会被拦截下来，例如：http://localhost:3333/sign-system/sign从浏览器访问这个url会被拦截下来，然后。
Nginx--同一端口同时代理vue项目和web项目
Ta曰丿、她活的博客
03-04 1123
环境：只有一台服务器，一个web系统使用了两台tomcat在运行，一个vue系统， 需要的结果：需要同时用到https的443端口，并且访问http时，自动跳到https中去 思路： [1]代理web项目很简单，按照之前的操作即可。 [2]代理vue项目时，为了和web项目的路径区分，在vue项目中添加前缀 路由配置index.js添加 const router = new...
vue项目 代码中代理 部署后nginx请求代理
weixin_43958014的博客
09-18 151
文件地址：config/index.js使用说明。
nginx同一端口代理多个vue项目（每个vue项目都是打包之后的静态页面）
qq_34169240的博客
03-20 1851
nginx中html文件夹下创建每个项目的文件夹，将项目打包之后的静态文件放入。 html文件夹下放入目录页面即index.html nginx配置： location中alias 分别指向每个项目的静态文件所在路径 location /qxServer/ { #proxy_pass http://localhost:808...
vue项目部署到nginx/tomcat服务器的实现
10-16
主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue前端项目部署之nginx配置.md
03-20
vue前端项目部署之nginx配置。
Vue中跨域及打包部署到nginx跨域设置方法
10-16
主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
Nginx+Vue作为静态资源服务器配置及使用
Nirvana_lss的博客
01-13 4732
Nginx作为静态资源服务器配置及使用前言编译安装NginxNginx相关命令nginx主要相关目录Nginx配置文件部署前端Vue项目可能出现的问题 前言 最近项目用的前后端分离架构，后端用的还是SSM，前端用的VUE+Node.js，但是在访问网站中发现首页一些地图及图表插件加载渲染异常缓慢，因为首页布局东西比较多，之前也对无用的js文件做过处理，但是效果还是不理想，加载完全竟然需要长达一分钟...
nginx的总结篇以及一台nginx代理多个资源服务
热门推荐
健康平安的活着的专栏
11-02 1万+
一 nginx的概念和作用 1.1 概念 1.nginx是一个代理静态资源的高性能http服务器和反向代理的服务器。 1.2 作用 1.代理静态资源：可以做静态网页的http服务器。 2.反向代理、负载均衡。：把请求转发给不同的服务器 3.解决跨域 4.配置虚拟机。 一个域名可以被多个ip绑定。可以根据域名的不同吧请求转发给运行在不同端口的服务器 1.3 启动关闭 1.启动： 在nginx目录下有一个sbin目录，sbin目录下有一个nginx可执行程序： ./nginx 2.查看ng
Vue优化（二）、CDN/nginx高效引入node_modules包
niexier的博客
06-04 2046
一、cdn获取路径地址 cdnjs：https://cdnjs.com/
Nginx部署vue项目和配置代理
if's Blog
08-03 1486
1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查，如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等，证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件，部署项目 查看nginx的配置，linux系统下的配置文件通常会存放在/etc目录下的n
vue项目使用proxy代理解决跨域及nginx配置
weixin_43249665的博客
02-21 1684
在vue.config.js中配置 proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } target：接口域名； changeOrigi...
nginx静态文件代理 服务代理
zona
12-25 1859
静态文件代理: nginx作为web服务器, 供外界访问html 服务代理: 将域名解析到对应的服务上, 或者负载均衡处理请求 nginx作为web服务, 对外提供单页面应用 server { # 监听端口 listen 80; # 域名 server_name www.baidu.com; location / { ...
nginx的使用（6）—— 配置静态代理
xiayz的博客
03-24 4231
文章目录前言一、配置图片静态代理二、配置验证码总结 前言 Nginx擅⻓处理静态⽂件，是⾮常好的图⽚、⽂件服务器。把所有的静态资源的放到nginx上，可以使应⽤动静分离，性能更 好。 一、配置图片静态代理 server { listen 80; server_name 域名地址; server_name_in_redirect off; #charset koi8-r; #默认请求 location /
vue跨域springboot跨域nginx代理配置
08-19
要实现Vue前端与Spring Boot后端的跨域通信，可以使用Nginx作为代理服务器来解决跨域问题。以下是一个简单的Nginx代理配置示例： 首先，确保你已经正确安装和配置了Nginx。然后，在Nginx的配置文件中添加以下内容： ``` http { server { listen 80; server_name example.com; # 静态文件目录 location / { root /path/to/frontend; try_files $uri $uri/ /index.html; } # API代理 location /api/ { proxy_pass http://backend_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } # 后端服务器配置 upstream backend_server { server backend_server_ip:backend_server_port; } } ``` 在这个示例中，假设前端文件存放在`/path/to/frontend`目录下，后端服务器的IP地址为`backend_server_ip`，端口为`backend_server_port`。 配置中的`location /`指定了前端静态文件的目录，并使用`try_files`指令将所有请求都重定向到`index.html`，以支持前端路由。 配置中的`location /api/`指定了后端API的代理，并通过`proxy_pass`将请求转发到后端服务器。`proxy_set_header`指令用于设置请求头信息，以便后端服务器能够获取到正确的客户端信息。 请根据你的实际情况修改示例中的路径、后端服务器地址和端口，并将上述配置添加到Nginx的配置文件中。重启Nginx后，Vue前端和Spring Boot后端之间的跨域通信应该可以正常工作了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值