nginx代理 vue前端

我在部署vue的时候,项目是在vue-element-admin的基础上二次开发的,然后npm run build 进行部署。发现很多东西和npm run dev的不同。这一点我很确认。我不得以只能通过npm run dev启动服务,然后通过nginx反向代理这个服务。

没采用build静态文件nginx部署的原因是,我怀疑build出来的文件有问题,因为放到spring boot里面验证过了。还有一个原因是只有通nginx代理启动的服务才能通过域名访问,直接npm run dev出来的服务不能通过域名访问。

过程如下

1.安装nginx

2.进入/etc/nginx/conf.d,新增vue.conf文件,编辑内容

server {
    listen       8080;
    server_name  _;
    location / {
        proxy_pass  http://localhost:8083/;
        }
}

内容意思是8080请求数据都会被映射到本地8083端口,8083服务是npm run dev的服务。至此代理完成

然后访问本地9000的spring boot接口,发现访问不了,但是通过本地curl可以正常返回,由此怀疑是必须配置代理。

接口访问通过全局变量serverAdress访问。

Vue.prototype.serverAdress = 'http://localhost:9000/';

为了配置代理现在,修改Vue.prototype.serverAdress = '/logcount/';vue.conf新增内容


server {
    listen       8080;
    server_name  _;
    location / {
        proxy_pass  http://localhost:8083/;
        }
    location /logcount/ {
        proxy_pass  http://localhost:9000/;
        }
   }

至此问题解决

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要配置nginx代理vue前端项目,你可以按照以下步骤进行操作: 1. 首先,你需要从nginx的官网(https://nginx.org/download/)下载nginx软件。 2. 下载并安装nginx后,进入nginx的配置文件目录(通常是在/etc/nginx/或/usr/local/nginx/conf/下),找到nginx.conf文件,使用文本编辑器打开该文件。 3. 在nginx.conf文件中,你可以找到一个名为"server"的块,这是nginx的虚拟主机配置。在这个块中,你可以添加一个新的location来代理vue前端项目。 4. 假设你的vue项目已经打包成静态文件,并且存放在"/var/www/vue"目录下。你可以在nginx.conf文件的"server"块中添加以下配置: ``` location / { root /var/www/vue; index index.html; try_files $uri $uri/ /index.html; } ``` 这段配置告诉nginx将所有的请求都代理到/var/www/vue目录下,并尝试查找匹配的文件,如果找不到则返回index.html文件。 5. 保存并退出nginx.conf文件。然后,重新启动nginx服务以使配置生效。 ``` sudo service nginx restart ``` 现在,你的nginx已经配置好了代理vue前端项目的设置。 请注意,以上步骤假设你已经将vue项目打包成静态文件,并将其放置在指定的目录下。如果你的项目还需要与后端服务器进行通信,你还需要配置nginx反向代理。具体的配置取决于你的项目需求和后端服务器的配置。 希望这个回答能够帮到你,如果还有其他问题,请随时询问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值