Spring Cloud整合Vue

由于公司项目是前后端分离的，我前段时间将后端的Spring Cloud框架搭建的差不多了，包括Eureka服务发现中心，远端配置中心Config，不同服务接口调用组件Feign等。最近前端开发也将前台搭建的差不多了，于是领导让我将Vue整合到Spring Cloud里面。话不多说，开干：

1.将前端给我的Vue项目的压缩文件解压后，将其添加到VS Code编辑器里：

2.电脑安装好npm及node（安装过程不在此赘述），使用ctrl+~键打开命令行窗口，使用-v命令查看是否安装完成

3.修改Vue的index.js文件

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/dist/',

4.使用npm run build指令打包Vue项目

5.打包成功后，在本地的Vue项目的路径下会多出一个dist文件夹，这里面的static和index.html就是我们要导入IDEA的Spring Cloud项目里面的东西

6.在application.yml中配置Spring Cloud的配置文件：

spring:
  mvc:
    static-path-pattern: /**
    view:
      suffix: .html
      prefix: /
  resources:
    static-locations: classpath:/META-INF/resources/,
      classpath:/resources/,
      classpath:/static/,
      classpath:/public/,
      classpath:/itstyle/

7.在resources目录下新建static文件夹，在static文件夹下将打包后的dist文件夹下的static文件夹及index.html拷贝过来：

打开index.html看看页面引入js及css的路径:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>leyou-manage-web</title>
    <link href="/static/css/app.1e7f07a13f9052f65a18d5884fa92959.css" rel=stylesheet >
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.a7f5abaced62c7638cab.js></script>
<script type=text/javascript src=/static/js/vendor.ca234df922066eca8547.js></script>
<script type=text/javascript src=/static/js/app.89e4e39d6613f7aaad9a.js></script>
</body>
</html>

8.写一个控制器，试试能不能访问index.html页面：

@RestController
public class VueController {

    @RequestMapping("/index")
    public ModelAndView index() {
        ModelAndView mav = new ModelAndView();
        mav.setViewName("/index");
        return mav;
    }
}

打开浏览器，输入localhost:9999，回车，可以看到页面已经跳转到index页面。说明Vue工程已经基本整合OK。

猜你喜欢