Vue2.x與SpringBoot使用Nginx前后分離

在進(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 ;
    }
}
  1. 下載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)論指正,謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。