由于公司项目是前后端分离的，我前段时间将后端的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。
---------------------
作者：asleepsheep丶
来源：CSDN
原文：https://blog.csdn.net/asleepysheep/article/details/81746683
版权声明：本文为博主原创文章，转载请附上博文链接！
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
