nginx中部署vue项目,以及配置后台反向代理和图片回显功能

一,部署前端项目

  1. 新建一个目录,用于存放打包后的dist下的文件
  2. 打开nginx的conf文件,进行配置,配置内容如下
    server
            {
                    listen 7995;
                    server_name localhost;
    
                    root /usr/local/Mes/web/admin; //前端打包文件目录
    
                    location / {
                            try_files $uri $uri/ @router;
                            index index.html index.htm;
                    }
    
    
                    location @router{
                            rewrite ^.*$ /index.html last;
                    }
    }
    
    
    //这样直接访问ip:7995即可访问到前端页面,也就部署好了

 二,配置后台接口的反向代理

 

  server
        {
                listen 7996;
                server_name localhost;

                location  /prod-api/ {
            proxy_pass http://133.45.44.44:8080/;
        }
}

//这样的写法代表着当访问ip:7995/prod-api/app时,会映射到地址http://133.45.44.44:8080/app上,
注意:proxy_pass 后的地址路径最后加/,则不会拼接prod-api,不加的话,映射的路径上就会加上prod-api

三,配置图片回显反向代理

  server
        {
                listen 7996;
                server_name localhost;
           //配置方式有两种,一种是路径匹配,一种是后缀匹配

        location ~ /file/img/ {
		 root /home/file/img/;
	     autoindex on;
    } 
          或

    
        location ~.*(file).(img|images)*\.(gif|jpg|jpeg|png)$ {
		 root /home/file/img/;
	     autoindex on;
    } 

          
}

//这里注意,图片的回显功能和其他的功能略有不同,包括第一种的路径匹配方式,它会把匹配的url拼接到
你下边的图片路径后边,去找个路径下寻找,例如http://ip:7996/file/img/a.jpg,相当于到/home/file/img/file/img下边去找a.img的图片

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的 nginx 本地部署 Vue 应用并反向代理配置的示例: 1. 打包 Vue 应用 首先需要在本地打包 Vue 应用,运行以下命令: ``` npm run build ``` 打包完成后,会在项目根目录下生成一个 `dist` 目录,其包含了所有打包后的静态文件。 2. 配置 nginxnginx配置目录,创建一个新的配置文件,比如 `myapp.conf`,并将以下内容复制进去: ``` server { listen 80; server_name myapp.com; root /path/to/dist; # 将 "/path/to/dist" 改为你实际的 dist 目录路径 index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 其,`myapp.com` 是你的域名,`/path/to/dist` 是你的 Vue 应用的打包后的静态文件所在的目录路径,`/api/` 是你要反向代理的后端 API 的前缀,`localhost:8080` 是你要代理的本地服务地址。 在上面的配置,`location /` 部分将所有请求都指向 Vue 应用的入口文件 `index.html`,`location /api/` 部分将以 `/api/` 开头的请求代理到本地服务上,并设置了一些请求头,包括 `Host`、`X-Real-IP` 和 `X-Forwarded-For`。 3. 启动 nginx 将 `myapp.conf` 配置文件放置在 nginx配置目录,通常位于 `/etc/nginx/conf.d/` 目录下。最后,重启 nginx 服务以应用新的配置。 ``` sudo service nginx restart ``` 现在,你可以通过访问 `http://myapp.com` 来访问 Vue 应用,并通过访问 `http://myapp.com/api/` 来访问本地服务的 API 接口了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

EntyIU

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值