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

tanoak

发布于 2018-06-06 12:08:43

1.7K0

发布于 2018-06-06 12:08:43

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

开始进行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 ;
    }
}

下载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