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 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

IntelliJ IDEA配置Spark使用

第二步下载插件 首先启动intelliJ IDEA:在命令行终端中,进入$IDEA_HOME/bin目录,输入./idea.sh进行启动,进入如下界面,然后...

4361
来自专栏Go 语言编程

GLC - glog 日志清理类库

GLC (glog cleaner) 是 Go 语言编写的 glog 日志清理类库,glog 是由 Google 开发的一个应用级日志框架,提供了日志分级、文件...

43210
来自专栏pangguoming

Nodejs开发框架Express3.0开发手记–从零开始

转载请注明出处: http://blog.fens.me/nodejs-express3/ 程序代码已经上传到github有需要的同学,自行下载。 http...

40712
来自专栏木子昭的博客

靠谱的 关闭Windows10自动更新第一步:获取本地网络属性修改权限第二步:将本地网络设置为按流量计费

自从Windows10发布后, 如何关闭Windows10的自动更新, 就是一个长盛不衰的话题, 后来微软看可爱的用户们讨论的这么开心, 就直接把关闭自动更新...

3959
来自专栏Python

linux每日命令(27):chmod命令

chmod命令用于改变linux系统文件或目录的访问权限。用它控制文件或目录的访问权限。该命令有两种用法。一种是包含字母和操作符表达式的文字设定法;另一种是包含...

971
来自专栏惨绿少年

练习题二下

1.1 第8题 linux 系统运行级别一般为 0-6,请分别写出每个级别的含义。 1.1.1 运行级别的含义 0 关机 1 单用户模式 2 多用户模式 没有...

2000
来自专栏飞雪无情的博客

Go语言实战笔记(十六)| Go 并发示例-Pool

这篇文章演示使用有缓冲的通道实现一个资源池,这个资源池可以管理在任意多个goroutine之间共享的资源,比如网络连接、数据库连接等,我们在数据库操作的时候,比...

1182
来自专栏破晓之歌

Django 开源相册组件介绍 django-photologue

下载地址:https://github.com/jdriscoll/django-photologue

2114
来自专栏乐沙弥的世界

Linux 常用目录管理命令(cd pwd mkdir rmdir)

      Linux 的命令非常之多,而使用的最多最广最基本的莫过于一些常用的命令,如目录命令即是如此。Linux的常用目录命令与DOS中的目录命 令非常相...

681
来自专栏菜鸟程序员

Android studio安装与配置

963

扫码关注云+社区

领取腾讯云代金券