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/;
        }
   }

至此问题解决

你可能感兴趣的:(vue部署)