vue 发布到springboot的步骤

时间 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.好像没啥其它要做的了. 启动调试,

vue 发布到springboot的步骤

猜你喜欢