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