vue打包后结合spring boot通过jar形式发布踩坑

一、怎样将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