Vue2.x与SpringBoot使用Nginx前后分离

在进行SpringBoot与Vue分离之前，我遍访百度的博客，发说现千篇一律的拷贝vue 生成 dist目录下的文件到springboot的static目录下，有木有其他更加灵活的方案，于是在nginx身上找到了答案，利用nginx的反向代理来实现不用拷贝到static目录下也能进行分离

1. 开始进行Vue
   假定你已经安装好了npm

1. 安装vue-cli 这是vue的脚手架
npm install vue-cli -g
2. 创建项目 
vue init webpack 项目名
3.运行
npm run dev
4. 打包生成 dist目录
npm run build

2.建立简单的pringBoot项目

@RestController
@RequestMapping("test")
public class TestController {

    @GetMapping("hello")
    public Map<String,Object> toHello(){
        Map<String ,Object> map = new HashMap<>() ;
        map.put("id","1") ;
        map.put("name","张三") ;
        map.put("年龄","15") ;
        return map ;
    }
}

3. 下载nginx
   打开D:\xxx\nginx\conf\nginx.conf 文件 ，配置如下

server {
        listen       8081;
        server_name  localhost;
#root 改成vue生成dist目录下的文件，

        location / {
            root   D:\Test\vue\vue1\dist;
            index  index.html;
        }
        location ^~ /test/ {
           proxy_pass   http://127.0.0.1:9090/test/;
        }

配置yml

server:
  port: 9090

项目运行效果

配置转发，将8081下的请求转发到9090
然后访问看运行效果,可以看到端口成功转发

这种方式会涉及到的一些问题，待笔者慢慢爬坑，欢迎评论指正，谢谢