在進(jìn)行SpringBoot與Vue分離之前，我遍訪百度的博客，發(fā)說現(xiàn)千篇一律的拷貝vue 生成 dist目錄下的文件到springboot的static目錄下，有木有其他更加靈活的方案，于是在nginx身上找到了答案，利用nginx的反向代理來實(shí)現(xiàn)不用拷貝到static目錄下也能進(jìn)行分離

1. 開始進(jìn)行Vue
   假定你已經(jīng)安裝好了npm

1. 安裝vue-cli 這是vue的腳手架
npm install vue-cli -g
2. 創(chuàng)建項(xiàng)目 
vue init webpack 項(xiàng)目名
3.運(yùn)行
npm run dev
4. 打包生成 dist目錄
npm run build

2.建立簡單的pringBoot項(xiàng)目

@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

項(xiàng)目運(yùn)行效果

配置轉(zhuǎn)發(fā)，將8081下的請(qǐng)求轉(zhuǎn)發(fā)到9090
然后訪問看運(yùn)行效果,可以看到端口成功轉(zhuǎn)發(fā)

這種方式會(huì)涉及到的一些問題，待筆者慢慢爬坑，歡迎評(píng)論指正，謝謝