SpringBoot集成vue的开发解决方案

SpringBoot 同时被 2 个专栏收录
2 篇文章 0 订阅
3 篇文章 0 订阅

最近由于工作要求:前端采用vue开发,后端采用springboot开发,前后端分离开发,最后前端页面又整合到后端来。经历多次采坑,总结以下方案:

  1. vue build后的文件部署到springboot目录
    vue打包后,会生成dist目录
    vue打包后的dist目录
    springboot静态资源目录如下:
    在这里插入图片描述
    SpringBoot处理静态资源和页面,设置如下:
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
 	registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
	super.addResourceHandlers(registry);
}

页面模板设置,如下:

#页面模板设置
spring.thymeleaf.option=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false

部署方案
dist的index.html 直接放在templates目录下
dist的css、fonts、img、js 直接放在static目录下

  1. vue打包后vendor文件过大的优化方案
    vue使用vue-cli打包后,vendor就将vue.js其他引用的包一起压缩打包进去,导致vendor文件超过1M,影响页面加载速度
    本项目使用了vue、vue-router、iview、axios、echarts等
    (1)使用vue、vue-router、iview、axios、echarts等cnd引用
    在index.html文件中,增加:

    <script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/iview@3.4.0/dist/iview.min.js"></script>
    <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script src="https://unpkg.com/echarts@4.2.1/dist/echarts.min.js"></script>
    

    (2)打包时,排除vue、vue-router、iview、axios、echarts等打包
    在webpack.base.conf.js文件中,module.exports={…} 方法中添加

    module.exports = {
    	...
    	externals:{
    	    'vue':'Vue',
    	    'axios':'axios',
    	    'vue-router':'VueRouter',
    	    'iview':'iview',
    	    'echarts':'echarts',
        },
        ...
    }
    

    这里有注意的是:命名问题
    比如:vue-router的在https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js中默认采用VueRouter,所以在import vue-router一定要使用VueRouter,而不能使用其他别名。

    vue默认别名是Vue
    axios默认别名是axios
    vue-router默认别名是VueRouter
    iview默认别名是iview
    echarts默认别名是echarts

    例子:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import iview from 'iview'
    import echarts from 'echarts'
    
    Vue.use(VueRouter)
    
    export default new VueRouter({
      mode: 'history',
      ...
    })
    

    (3)vue-router的路由页面设置为按需加载

    export default new VueRouter({
      mode: 'history',
      routes: [
        //页面1
        {
          path: '/Page1',
          name: 'page1',
          component: () => import('@/views/Page1.vue')
        },
        //页面2
        {
          path: '/Page2',
          name: 'page2',
          component: () => import('@/views/Page2.vue')
        }
     ]
     });
    

    (4)重新打包后vendor.js文件就小了,可以小到1k哦

  2. vue-router使用了history模式,vue其实做的是单页面应用,但是效果看上去是多个不同页面,问题来了,部署到线上环境后,该如何配置?

    百度上有很多处理方案,比如:使用errorPage方式处理,nginx配置等,这些问题比较繁琐,而且在部署过程中,一堆问题。
    经过多次尝试,发现有一个最简单方法,Controller直接url路径配置到index.html即可,而且轻松解决history模式带来的后端问题,如下:

    
    @ApiOperation(value = "", hidden = true)
    @RequestMapping(path = "/Page1")
    public String page1() {
        return "index";
    }
    
    @ApiOperation(value = "", hidden = true)
    @RequestMapping(path = "/Page2")
    public String page2() {
        return "index";
    }
    

    这种方案非常有利于后端开发人员做更多的进一步操作,比如:给每个页面增加页面权限等。
    注意:该方案目前适用于前端页面整合到后端的项目工程。

  • 10
    点赞
  • 2
    评论
  • 38
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<div> 适用人群 <p> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style=&quot;color:#666666;&quot;> 【讲师介绍】<br /> 讲师职称:<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。&nbsp;<br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea&nbsp;,JDK&nbsp;1.8以上&nbsp;<br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud&nbsp;F版本以后的版本),如下(节选):&nbsp;&nbsp;&nbsp;&nbsp;<br /> 持久层框架:MyBatis&nbsp;3.x&nbsp;+&nbsp;Mybatis-plus&nbsp;3.x<br /> 日志管理:SLF4J&nbsp;1.7&nbsp;+&nbsp;Log4j2&nbsp;2.7<br /> 工具类:Apache&nbsp;Commons、Jackson&nbsp;、fastjson、Gson<br /> 权限验证<br /> 前端技术&nbsp;&nbsp;<br /> Vue&nbsp;&nbsp;<br /> Vue-cli<br /> ElementUI&nbsp;---https://element.eleme.io/<br /> JSX&nbsp;(JavaScript&nbsp;Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式&nbsp;&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;前后端分离的开发<br /> 数据库&nbsp;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mysql5<br /> IDE<br /> &nbsp;&nbsp;&nbsp;&nbsp;Intellij&nbsp;Idea </div> </div>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值