Spring Cloud整合Vue

川长思鸟来 2022-04-15 01:58 214阅读 0赞

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

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

![70][]

![70 1][]

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

![70 2][]

3.修改Vue的index.js文件

![70 3][]

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项目

![70 4][]

![70 5][]

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

![70 6][]

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拷贝过来：

![70 7][]

打开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。

![70 8][]  
\---------------------   
作者：asleepsheep丶   
来源：CSDN   
原文：https://blog.csdn.net/asleepysheep/article/details/81746683   
版权声明：本文为博主原创文章，转载请附上博文链接！

[70]: /images/20220415/b7dea71d19444c24b8dac49ecea04ad2.png
[70 1]: /images/20220415/228fec9761f2474084d1b9e199ee40e1.png
[70 2]: /images/20220415/6b2430d11dfa49b4a9f9c9e67d6383eb.png
[70 3]: /images/20220415/95ef41a378f94d10812af8be1057b553.png
[70 4]: /images/20220415/5696c94dd8d24aecacfca96b68d4b603.png
[70 5]: /images/20220415/77485aba0dfa40debfb864bd3ed74c07.png
[70 6]: /images/20220415/310e19727f3b48a6a4d2e0aad15844c7.png
[70 7]: /images/20220415/3e5374196bee41e0915392c9c8dc5752.png
[70 8]: /images/20220415/58e7cf7b8bbb4790b15993334efbc155.png