时间 2020年1月,应该是使用了最新的spring boot, 和vue使用的是vue/cli@3
0.打包前要配置vue中静态资源的文件路径.
vue.config.js中.
module.exports = {
publicPath: '/static/', // 这个指向的地址就是打包后,html文件引用js文件的路径地址.
}
这个指向的地址就是打包后,html文件引用js文件的路径地址.
如下示例,
<link href=/static/js/chunk-2d0aa22f.a9d65018.js rel=prefetch>
如果没配置, 默认生成的是
<link href=./js/chunk-2d0aa22f.a9d65018.js rel=prefetch>
下面是打包后index.html文件路径格式.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/static/favicon.ico>
<title>系统名称</title>
<link href=/static/js/chunk-2d0aa22f.a9d65018.js rel=prefetch>
<link href=/static/js/chunk-2d2095aa.366b4259.js rel=prefetch>
<link href=/static/js/chunk-2d20f917.8ef14ced.js rel=prefetch>
<link href=/static/js/chunk-2d2171a7.a48f9bdc.js rel=prefetch>
<link href=/static/js/chunk-2d22b9a2.419944c0.js rel=prefetch>
<link href=/static/js/chunk-2d22d746.5b2f8df2.js rel=prefetch>
<link href=/static/js/chunk-6903437e.36a57aca.js rel=prefetch>
<link href=/static/css/app.2ae7bbdf.css rel=preload as=style>
<link href=/static/css/chunk-vendors.8a47258c.css rel=preload as=style>
<link href=/static/js/app.03faaf38.js rel=preload as=script>
<link href=/static/js/chunk-vendors.48ac303e.js rel=preload as=script>
<link href=/static/css/chunk-vendors.8a47258c.css rel=stylesheet>
<link href=/static/css/app.2ae7bbdf.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but citymanagesystemui doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id=app>
</div>
<script src=/static/js/chunk-vendors.48ac303e.js>
</script>
<script src=/static/js/app.03faaf38.js>
</script>
</body>
</html>
1.打包vue 使用命令
npm run build
2.把vue打包生成的dist目录下的所有文件复制到spring boot 项目目录下面.类似下图
3.修改配置文件, 在application.properties 文件中修改配置, 启用静态资源的路径 如上图.
spring.mvc.static-path-pattern=/static/**
4.新建templates目录. 把生成的index.html复制到这个目录下. 其它文件不用复制.
5.新建 一个Controller
注解一定要是 @Controller而不能是 @RestController
/**
* 首页
* @author: 郑桂良
* @create: 2021-1-4
*/
@Controller
public class IndexController {
@RequestMapping("/")
public String Index() {
return "index"; // 这个就显示跳转到了index.html, 注意是templates下面的
}
}
5.好像没啥其它要做的了. 启动调试,