专栏首页java闲聊Vue2.x与SpringBoot使用Nginx前后分离

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 ;
    }
}
  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

项目运行效果

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅谈架构(单体架构、 SOA架构、微服务架构)

    * 一个典型的单体应用就是将所有的业务场景的表示层、业务逻辑层和数据访问层放在一个工程中,最终经过编译、打包,部署在一台服务器上。

    tanoak
  • Hyper-v安装Centos7-网络配置与更新内核

    笔记本用了windwos10之后发现VMware与Hyper-v不兼容,于是为了用Hyper-v,果断把VMware卸载了,如果你也有我这种想法,那么请继续往下...

    tanoak
  • org.thymeleaf.exceptions.TemplateInputException: Error resolving template 解决

    tanoak
  • Python多线程学习 setDae

    # -*- coding: utf-8 -*- import threading import time class myThread(threadi...

    py3study
  • Nginx Linux详细安装部署教程

    Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤

    用户7657330
  • 手把手教你,嘴对嘴传达------Nginx网站服务(访问状态统计,基于域名,端口,IP的虚拟web主机访问)

    nginx -V查看已安装的Nginx是否包含HTTP_ STUB _STATUS模块

    不吃小白菜
  • [Linux] 协程是不是我想的这样

    最早知道的概念是进程 , 每个进程里面的执行单元是线程 , 一个进程肯定有一个主线程 , 也可以开出一些子线程 ,这俩都是操作系统控制的

    陶士涵
  • 拥有一台你的轻量应用服务器Lighthouse

    ? 本文来自微信公众号:腾讯云服务器(id:TencentCVM),作者腾讯云煮鸡。 腾讯云轻量应用服务器 Lighthouse 自从 7 月 13 日正式公...

    腾讯技术工程官方号
  • 轻量应用服务器「Lighthouse」的故事

    腾讯云轻量应用服务器 Lighthouse 即将正式上线。在 Lighthouse 两个月的公测期内,大量中小企业和个人开发者体验与使用,用户与实例规模均呈指...

    腾讯云计算产品团队
  • 修改存储过程

    4.复制以下示例并将其粘贴到查询编辑器中,先创建存储过程。该过程返回 Adventure Works Cycles 数据库中所有供应商的名称、所提供的产品、信用...

    Vincent-yuan

扫码关注云+社区

领取腾讯云代金券