一、vue打包。

cmd进入项目目录。

执行 npm run build

会在改目录生成dist文件。(假设dist目录是:D:\dist)

二、部署

下载nginx.

修改nginx.conf

在http  中加入

upstream myapp1 {
            server 54.223.18.148:8085;
            server 54.223.18.148:8087;
    }
 修改server.      
    server {
        listen       8888;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root         D:\dist; #vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #拦截前端页面请求的路径XindianData，并转发到54.223.18.148:8085，54.223.18.148:8087
        location  ^~/XindianData/{
            proxy_pass http://myapp1;
        }
        
        
        #.......其他部分省略
    }

二、ngin实现反向代理（url不变）

本人测试，代理后如果url保持不变，需要有前后端分离的框架，后置不用登陆的界面。

修改 nginx.conf

listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            index  proxy_set_header Host $host;
            index  proxy_set_header X-Real-IP $remote_addr;
            index  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://www.test.com.cn:8086/login.jsp/;
        }
         location ~ .*\.(js|css)$ {
             proxy_pass http://www.test.com.cn:8086;
         }