精华内容
下载资源
问答
  • 业务场景: 1github下载的项目,前后端分离,前端一个项目,后端一个项目,前端是vue,后端是springboot。 2由于服务器权限问题,...2springboot打包jar,运行成功 3出现问题,页面打不开,查看问题,请求不到static

    业务场景:

    1github下载的项目,前后端分离,前端一个项目,后端一个项目,前端是vue,后端是springboot。

    2由于服务器权限问题,不允许讲vue放到nginx下

    解决办法

    1把vue编译后的静态文件放到springboot项目的resources下面,即将index.html放到resources/templates下面,将static下面的文件放到resources/static下

    2springboot打包jar,运行成功

    3出现问题,页面打不开,查看问题,请求不到static下的文件

    4观察发现,请求目录为ip:端口/static/js/xxx.js,请求不到,如果请求ip:端口/js/xxx.js的话,可以请求到

    5问题解决,把vue的整个static文件夹放到springboot的static下面,目录结构成了resources/static/static/js/xxx.js,如下图

    6问题解决

    展开全文
  • 突然项目来个需求,需要将前端的vue整合到后端的springboot打包jar包部署,才疏学浅一时间不知如何处理,只能网上找各种资料。期间踩了很多坑,总算是解决了。 二、解决的步骤 1、首先vue打成dist包,发给后端的...

    一、前言

    项目是前后端分离的springboot+vue,之前都是前后端分开部署的,前端打成dist,后端打成war包部署到tomcat。突然项目来个需求,需要将前端的vue整合到后端的springboot打包成jar包部署,鄙人才疏学浅一时间不知如何处理,只能网上找各种资料。期间踩了很多坑,最后总算是解决了。

    二、解决的步骤

    1、vue打包放到spingboot项目下面

    首先vue打成dist包,发给后端的我,我把这个包放在resources的static目录下,目录结构如下

     

    2、配置拦截器,映射静态资源

    这里有两种方法,第一种可以继承WebMvcConfigurerAdapter,然后重写addResourceHandlers方法,第二种可以直接实现WebMvcConfigurer接口,然后重写addInterceptors来添加拦截器,需要注意的是,springboot2.+默认是静态文件的路径就有/resources/static,所以这里如果是springboot2.+其实不用配置也是可以的。

    第一种方法:

    第二种方法,可以省略:

     

    3、处理静态资源路径问题

    上面配置好之后,我们本地启动服务,按理说是可以访问页面的,但是我们打开页面发现页面是可以访问,但是静态资源全是404,首先我们看静态资源路径少了个后台项目名称的前缀,导致404,我们加上之后就可以。不过要在静态资源前加这个项目名称,只能是前端加,所以每个引用到静态资源的地方都要加这个项目名称,这样其实比较麻烦。所以能不能在一个地方就配置这个呢,或者能不能不加这个项目名称呢?后来发现其实我们可以在后台配置服务器路径的地方,把这个项目名称去掉就好,这样就不用再去改静态资源的路径。还有一个方法好像可以在vue构建时候路由里base里面加项目名称,这个我没试过。网上很少有提到这个问题的,所以也算是踩坑了

     

    4、解决index.html404问题

    静态资源可以访问了,按理说页面是可以打开了吧,然鹅并没有。我们访问index.html发现直接跳转到404了,这个地方一开始我们以为是后台没有处理404这个页面的跳转,所以我在后台加了这个,把错误页处理设置成我们的首页:

    这样可以了吧,一打开还是不行,还是404,后来我们发现这个404其实是前端路由处理的,前端路由没有处理index.html跳转到login登录页,这样页面会直接跳到404

    问题知道了,那我们在路由那加一个index.html跳转到login就可以了。

     

    5、解决刷新页面不能访问问题

    现在login页面可以打开了,登录也可以登录了,然后又发现只要刷新一下页面,就直接跳到404,或者直接跳到后台接口地址了。404是因为前端路由没有匹配到这个路径,就会跳转到404。跳到后台接口是因为前端页面和后台的接口起冲突了,比如前端页面路径是login,后台接口也是login,这样如果访问login肯定判断的进入后台的地址。

    怎么解决呢?

    我们的方法是这样:springboot里面随便加一个路径,让他放行,比如/redirect/**,我们在后台的secuity配置让他无授权访问,把这个路径交给前端处理,vue构建时候路由里base也改成/redirect/,这样访问前端的项目以及刷新,只要是前缀带/redirect/都会被匹配到前端的路由。

    6、整合用maven打成jar包

    以上步骤之后,页面打开没问题,刷新页面也没有问题,最后测试接口访问也没问题。现在只需要后端打成把spirngboot+vue打成jar包就可以了。pom配置如下:

    这里打包的时候遇到本地jar打包过后无法引用的问题,加这个就可以。

    <includeSystemScope>true</includeSystemScope>

    还有打成jar包后运行出现bean循环调用的问题The dependencies of some of the beans in the application context form a cycle,

    通过检查代码修改一下即可。

    打好的jar包,直接用命令行java -jar jar包路径 运行就可以了。

    至此,大功告成!

     

    三、总结

    1、SpingBoot2.+的静态资源映射路径可以不用配置,默认的就可以。

    因为,Spring Boot 对静态资源映射提供了默认配置,默认将 /** 所有访问映射到以下目录:

    classpath:/static
    classpath:/public
    classpath:/resources
    classpath:/META-INF/resources

    2、静态资源访问不了的问题,可以直接在SpringBoot的服务器配置里面把服务名称去掉,这样直接用IP+端口号访问前端页面,至于在前端加服务名称的方式没有试过,不知道可不可以。

    3、刷新页面地址找不到的问题,可以让前后端约定一个路径前缀,让后端抛出这个路径给前端,前端设置路由进行处理。

     

    原创不易,转载请注明出处!

    参考文章:

    Spring Boot整合Vue,解决静态资源映射,页面刷新失效,路径配置等问题:https://blog.csdn.net/godelgnis/article/details/89683760

    springboot中集成vue项目,vue项目路由history模式不能刷新和输入url访问问题:https://blog.csdn.net/zxw75192/article/details/84371951

    展开全文
  • 1、通过npm run build命令打包vue项目,生成打包文件,打包文件统一dist目录下 2、spring boot项目中创建static文件夹 *注意,没有static文件夹的时候,自己创建一个即可。 3、访问地址 ip+端口号+前缀+/...

    一、怎样将vue和spring boot一起发布

    这个简单,将vue项目build后,打包文件复制到spring boot的static文件夹即可。

    1、通过npm run build命令打包vue项目,生成打包文件,打包文件统一在dist目录下

    2、spring boot项目中创建static文件夹 

    *注意,没有static文件夹的时候,自己创建一个即可。 

    3、访问地址 ip+端口号+前缀+/index.html

    二、访问后端接口报404问题

            这种情况是因为devServer只在开发模式下生效,打包以后不生效。

    1、设置dev和prod两个环境配置文件,设置不同环境下访问后端接口的前缀VUE_APP_BASE_URL

    2、设置axios的访问路径前缀:

    axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

     3、然后更新package.json,设置启动开发环境和build时,获取不同的环境配置信息

     "serve": "vue-cli-service serve --mode dev",

    "build": "vue-cli-service build --mode prod",

     4、页面内的请求也就不用追加前缀了

    附一个开发模式下的devServer

     

     三、访问页面有时空白问题

             这个是路由模式设置问题,将history改为hash即可

    四、加载不到静态资源问题

            加载不到页面、js、css、图片等,都是因为spring boot有自己的context-path,解决同api路径问题。

    1、配置dev和prod不同的前缀 VUE_APP_PUBLIC_PATH,dev环境下

    VUE_APP_PUBLIC_PATH = /

    prod环境下

    VUE_APP_PUBLIC_PATH = 你的spring boot项目的context-path

     3、然后在vue.config.js中配置

    publicPath: process.env.VUE_APP_PUBLIC_PATH,

    踩坑记录如上,如有错误,欢迎指正。扣扣:1286946858,备注请填写csdn

     

     

    展开全文
  • 一开始的时候是前端VUE开发完成后打成dist包然后发给我(前后端不一起开发),我拿到dist包后解压然后放到springboot的static目录下。然后将项目打成jar包。最后部署,一次两次没问题,但是如果是联调阶段,前...

    一、前言

    spring boot是要打成jar包运行的,项目采用了前(VUE)后(SpringBoot)端完全分离,开发完成后需要整合到一起发布,这就要引出这篇博客的由来了;一开始的时候是前端VUE开发完成后打成dist包然后发给我(前后端不在一起开发),我拿到dist包后解压然后放到springboot的static目录下。然后将项目打成jar包。最后部署,一次两次没问题,但是如果是联调阶段,前端改了东西就会很麻烦。因为我们不在一起工作,团队的git地址不是同的。
    项目经理提出:把这两个一起打包,你研究一下,能到做吧?
    这时我走向了楼顶,好的,博客结束,人生结束。。。。(搞笑一下)
    程序员的字典里没有不字,来,干他!去网上搜,别说还真有这玩意(比人才疏学浅,工作没多长时间,所以对我来说算是个难题)但是原博客里有坑啊,弄过来以后没达到预期效果啊,这个坑就是我长进的地方了。

    二、环境介绍

    一个springBoot项目、maven、VUE前端源码、本地需要安装node环境、IDEA

    三、采坑

    加个思路说明吧:通过maven打包jar包时,通过maven调用node命令先将VUE打包,然后将打包好的东西通过复制的方式到指定目录;这个是网上其他博客的思路,我一开也是进行这种,后面进行了改进。先踩别人踩过的脚印。
    1)先介绍一下目录结构:如下如
    在这里插入图片描述
    说明一下:springBoot的是目录结构是java和resource,在main目录下创建一个文件夹web(名字你自己定,但是下面配置maven的时候要对应上);
    扩展:在IDEA中开发vue,可以安装UVE.js插件,这个安装教程我就不写了,网上有。
    2)要介绍一下VUE打包流程,首先源码是我要过来以后直接粘贴到的web文件夹下,但是没有node_modules这个文件夹,因为这个文件夹一般很大(而且好像默认也会忽略这个文件夹),所以前端没有粘给我。这个时候就需要先install
    拿到源码后npm命令总结如下:npm install (安装相关modules)
    npm run build (打包)
    如果是npm镜像为淘宝的那个的话,npm和cnpm等效。
    3)在项目中的pom文件中添加插件,pom文件如下图:
    先声明:VUE源码没有node_module,所以是要第一步执行的,第二部是buildVue,第三步是复制打包的东西到指定目录。
    这个顺序很重要,就像人生一样,凡事总要有个顺序。。。扯远了,之所以是因为强调顺序,是因为我采的坑就是顺序问题。
    pom文件来了,如下图:

     <build>
            <plugins>
                 <!--SpringBoot和VUE整合打包-->
                 <plugin>
                     <groupId>org.codehaus.mojo</groupId>
                     <artifactId>exec-maven-plugin</artifactId>
                     <executions>
                         <!--1、maven执行node的install命令-->
                         <execution>
                             <id>exec-cnpm-install</id>
                             <!--这个阶段很重要,不能乱写,install必须要为第一阶段-->
                             <phase>initialize</phase>
                             <goals>
                                 <goal>exec</goal>
                             </goals>
                             <configuration>
                                 <executable>cnpm</executable>
                                 <arguments>
                                     <argument>install</argument>
                                 </arguments>
                                 <!--执行install命令的目录-->
                                 <workingDirectory>${basedir}/src/main/web</workingDirectory>
                             </configuration>
                         </execution>
                         <!--2、install完成后build-->
                         <execution>
                             <id>exec-cnpm-run-build</id>
                             <!--阶段一定要在复制之前,且在打包和复制都在编译之前-->
                             <phase>initialize</phase>
                             <goals>
                                 <goal>exec</goal>
                             </goals>
                             <configuration>
                                 <executable>cnpm</executable>
                                 <arguments>
                                     <argument>run</argument>
                                     <argument>build</argument>
                                 </arguments>
                                 <workingDirectory>${basedir}/src/main/web</workingDirectory>
                                 <addOutputToClasspath>true</addOutputToClasspath>
                             </configuration>
                         </execution>
                     </executions>
                 </plugin>
                <!--3、复制打包好的文件到指定目录-->
                 <plugin>
                     <groupId>org.apache.maven.plugins</groupId>
                     <artifactId>maven-resources-plugin</artifactId>
                     <configuration>
                         <encoding>${project.build.sourceEncoding}</encoding>
                     </configuration>
                     <executions>
                         <execution>
                             <id>copy-spring-boot-webapp</id>
                             <phase>initialize</phase>
                              <goals>
                                  <goal>copy-resources</goal>
                              </goals>
                             <configuration>
                                 <encoding>utf-8</encoding>
                                 <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
                                 <resources>
                                     <resource>
                                         <directory>${basedir}/src/main/web/dist</directory>
                                     </resource>
                                 </resources>
                             </configuration>
                         </execution>
                     </executions>
                 </plugin>    
            </plugins>
        </build>
    

    说明:这个地方需要说一下maven的打包的阶段,然后配合上上面说明的顺序才能一步打包成jar。
    4)扩展—maven的默认生命周期,以下是按照先后顺序排列的。

    1 . 2 default生命周期
    
    default生命周期是最核心的,它包含了构建项目时真正需要执行的所有步骤。
    
    validate
    initialize
    generate-sources
    process-sources
    generate-resources
    process-resources    :复制和处理资源文件到target目录,准备打包;
    compile    :编译项目的源代码;
    process-classes
    generate-test-sources
    process-test-sources
    generate-test-resources
    process-test-resources
    test-compile    :编译测试源代码;
    process-test-classes
    test    :运行测试代码;
    prepare-package
    package    :打包成jar或者war或者其他格式的分发包;
    pre-integration-test
    integration-test
    post-integration-test
    verify
    install    :将打好的包安装到本地仓库,供其他项目使用;
    deploy    :将打好的包安装到远程仓库,供其他项目使用;
    

    5)坑在哪?:坑就在网上的博客只是在阶段上粘贴了一段如:
    代码下

     <execution>
                             <id>copy-spring-boot-webapp</id>
                             <!-- here the phase you need -->
                             <phase>initialize</phase>
                              <goals>
                                  <goal>copy-resources</goal>
                              </goals>
    

    像我这种经过这种坑才知道maven生命周期的人是注定要踩进去的。踩的坑多了,世界便没有了坑。。。
    像这个initialize 这里填入的参考上面贴出的maven默认生命周期,因为打包是将target下的东西最后压缩成jat ,也就是编译后的东西,所以我们的install,build和复制操作都应该在compile阶段之前。所以选择在了第一阶段initialize。当初网上博客写的基本上全都是prepare-package阶段,这tm让我这个渣渣调了三个小时,最后将坑zhan于马下。也不知道他们那些是真的一步打包成功了还是故意留坑。
    6) 关于标签,这个是将插件的执行绑定到maven执行的时候生命周期。关于这个生命周期有一篇博客,我转载了,列举的很清楚。
    传送门:
    7)虽然解决了坑,但是解决完思考一下,步骤其实可以是可以简化的,就比如那个复制过程。以及install过程。下个标题介绍简化。
    8)如果你在maven 里配置install、build和copy第一次的时间会很长,而且还不一定会成功。可以根据需要将阶段优化。主要是因为maven执行node命令的时候,node那个命令很慢。

    四、简化

    1)install这个建议最好在maven配置中去掉,时间慢是一部分原因,另一部分原因就是,如果你以后要重新打jar的话,还是会执行install,这个install只需要一次就够了,所以建议这个install不要加。在将源码复制的时候要一份node_modlues或者自己学着在cmd里先执行完install命令。如果node环境没问题,因为这个只需要成功执行一次就够了。另一种情况就是如果项目一开始在搭建的时候,vue和springboot都在一个目录下的话,也就是初始化vue的时候你肯定执行过install命令。另外说明一点就是如果Vue前端开发中添加了新的modules,你就需要执行install命令,(而且版本控制的时候没有提交这个新的modules),作为一个java开发工程师在cmd里执行一下子还是行的吧,毕竟你想一起打包的话,也要安装node环境,只需要在vue目录下执行 npm install 就可以了,没什么难度。
    2) build是必须要的,如果我们把build好的包直接build到指定目录,这样是不是就不在需要copy这个插件,对吧,所以我的简化思路就是直接build到指定目录好了。

    五、简化过程

    1)思路:先在cmd中执行install(因为install不是主要的,只有在vue中添加了新的Modules和初始化时才需要),所以去掉这个plugin;主要就是执行run build,所以将复制那一步也省略掉。
    2)修改pom文件中的配置,修改后如下(其实就是将install和copy去掉了):

    <build>
            <plugins>
                 <!--SpringBoot和VUE整合打包-->
                 <plugin>
                     <groupId>org.codehaus.mojo</groupId>
                     <artifactId>exec-maven-plugin</artifactId>
                     <executions>
                         <!--2、install完成后build-->
                         <execution>
                             <id>exec-cnpm-run-build</id>
                             <phase>initialize</phase>
                             <goals>
                                 <goal>exec</goal>
                             </goals>
                             <configuration>
                                 <executable>cnpm</executable>
                                 <arguments>
                                     <argument>run</argument>
                                     <argument>build</argument>
                                 </arguments>
                                 <workingDirectory>${basedir}/src/main/web</workingDirectory>
                                 <addOutputToClasspath>true</addOutputToClasspath>
                             </configuration>
                         </execution>
                     </executions>
                 </plugin>
           
            </plugins>
        </build>
    

    说明:${basedir}/src/main/web是放置整个VUE源码的地方,当去掉复制这一个plugin以后,就需要在VUE源码里进行修改,也就是设置build的时候直接放到springBoot的static下。
    3)项目目录结构如下:
    在这里插入图片描述
    说明:static是放置静态资源的文件目录(SpringBoot默认获取静态资源和页面的设置可百度了解一下),web是自己创建的,名字可以改,之所以创建这个一个目录是将前后端分离,如果目录结构和我的这个不一样的,修改Vue的打包配置时需要对应上。
    4)修改Vue中的打包配置;
    先了解一下文件的相对路径知识,web和static是同级目录。
    对Vue的修改是上图目录中的web/config目录下的index.js,修改后代码如下:

    'use strict'
     documentation.
    
    const path = require('path')
    
    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: true,
        errorOverlay: true,
        notifyOnErrors: false,
        poll: false, 
        useEslint: true,
        showEslintErrorsInOverlay: false,
        devtool: 'cheap-source-map',
        cssSourceMap: false
      },
    //  整合打包主要是修改这个build
      build: {
        // Template for index.html
        // index为Vue的打包后的入口
        index: path.resolve(__dirname, '../../resources/static/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../../resources/static'),
        assetsSubDirectory: '',
        assetsPublicPath: '/',
        // 修改结束
        
        productionSourceMap: false,
        
        devtool: 'source-map',
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report || false,
        generateAnalyzerReport: process.env.npm_config_generate_report || false
      }
    }
    
    

    5)这样就可以将打包好的Vue的东西直接放到static下了,原理很简单。弄到别的路径就修改一下上面的打包路径。

    展开全文
  • 由于springboot内置了tomcat等容器,因此可以将前端程序打成jar包,减少多安装tomcat工作,springboot整合前端静态资源及VUE项目主要步骤如下: 一、pom build增加路径映射配置 <build> <resources...
  • 众所周知我们是无法直接通过打开 vue 打包好的 dist 目录下的 index.html ,需要我们本地开启一个服务器进行访问,这里分享一个node 开启本地服务器的方法, 首先我们需要dist 外层目录新建一个 server.js 文件 ...
  • Springboot+Vue打包部署总结

    千次阅读 2020-06-15 20:21:30
    文章目录一、Vue打包+部署1. 打包(npm run build:prod)2.nginx部署前端vue项目二、Springboot打包+部署1.打包(mvn clean package)2.部署三、大功告成! 一、Vue打包+部署 1. 打包(npm run build:prod) 打完之后...
  • 下面小编就为大家整理了一篇解决vue打包项目后刷新404的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue打包 Vue打包文章的第七大点 注意两点: 第一点 端口对应问题 第二点 #号标识 SpringBoot项目打包 将dist文件夹内容粘贴到Vue中 添加静态文件的映射 spring: resources: static-locations: ...
  • 1.vue项目打包 npm run build 若使用的vue-element-admin后台通用模板使用如下命令打包 # 打包正式环境 npm run build:prod # 打包预发布环境 npm run build:stage 打包成功标志: 2.将打包好的vue项目放...
  • vue打包成app应用,Webstorm+cordova打包vue成Android项目 Two_Too 2018-10-18 16:07:00 4129 收藏 3 展开 一. 打包vue vue项目开发完成后, 使用npm run build 打包成功之后,打开生成的dist文件夹中的 index....
  • vue搭建脚手架报错:rollbackFailedOptinal:verb npm-session解决
  • Maven多模块打包成war+vue打包 Maven多模块打包成war 示例 对于这样的工程, 1、需要将总的maven工程进行pom打包 <groupId>**</groupId> <artifactId>**</artifactId> ...
  • vue打包(npm run build)

    千次阅读 2019-02-11 10:51:11
    二、vue项目的打包 1、大家都知道使用npm run build进行打包,这个时候你直接打开dist/下的index.html,会发现文件可以打开,但是所有的js,css,img等路径有问题是指向根目录的, 此时需要修改config/index.js里的...
  • vue打包时删除console.log 一、使用插件uglifyjs-webpack-plugin vue.config.js中添加对应的配置 const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { configureWebpack: { ...
  • cordova vue打包 小米推送

    万次阅读 2020-04-10 14:48:30
    如果采用cordova打包,需安装Android环境,可参考 http://www.ctrlands.com/2019/09/02/Cordova+Vue%E5%9F%BA%E7%A1%80%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/ 安装安装Android Studio问题解决:...
  • Cordova+Vue打包APP

    千次阅读 2018-12-07 14:47:54
    打包APP步骤:(除非特殊说明,以下步骤均为Windows环境) 1.安装node环境 2.安装cordova插件 3.配置安卓的SDK和JDK环境变量(Android),配置iOS的xcode环境(iOS) 4.整合vue到cordova 安装node环境: 首先去官网...
  • vue 打包后找不到资源文件

    千次阅读 2020-05-13 19:41:17
    前一段时间我们写了一个项目,本地是好的,但是布到线上发现有些字体图标找不到,然后就各种找问题,最后确认是资源文件路径没引用正确导致的, 怎么解决呢: ... fallback: 'vue-style-loader'
  • ![图片说明](https://img-ask.csdn.net/upload/201905/09/1557396278_66899.png) ![图片说明](https://img-ask.csdn.net/upload/201905/09/1557396315_352477.png) !... 配置文件只有数据库和端口配置
  • 达到部署最简化的过程,于是乎研究把vue打包的项目集成到springboot项目中,这样就打包springboot项目的时候就直接把前段的静态页面都携带进去了,部署就只需要启动一个jar包就可以实现页面访问及数据调取...
  • 前情摘要: 开发工具:idea,就先这样吧 一、SpringBoot 打包与部署 ...//idea不知道哪输入命令?下边有张图 搞定之后如图,绿色反正比红色好看 看向你目录的target,对对对,就是它了...
  • 记一次vue-cli前端项目打包到spring boot生成jar包,生成软件安装包的过程1、vue打包之前的配置2、前后端合并3、生成jar包4、使用exe4j生成exe文件5、打开exe4j5、使用Inno Setup Compiler生成安装包6、exe4j和Inno ...
  • 我的思路是编写一个cordova自定义插件然后把jar包集成到这个自定义插件中,在vue中调用,vue通过webpake打包生成www文件(图在下)js中调用cordova自定义插件中的方法返回 那么好了 首先我们要先自定义插件 1 先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,253
精华内容 1,301
关键字:

vue打包在jar

vue 订阅