前言
之前曾在博客中提到SpringBoot整合Vue,这里进一步扩展,谈谈如何将前后端的项目部署到个人服务器中,由于个人只有阿里云服务器一台,这里的操作是前后端项目均部署至tomcat的情况,在网上自己也并未找到详细的教程,自己操作时也遇到一些阻碍,这里做下记录,也给他人提供借鉴。
事不宜迟,进入正文。
正文
前端的操作
首先对于vue代码,如下操作:
-
npm run build
将dist下的index.html和static文件夹复制粘贴到tomcat的webapps的新建目录下(此例新建test目录),启动tomcat,访问localhost:8080/test,访问成功;
-
但此时发现部分静态资源,比如fonts等图标都无法显示,找到build下的utils.js,修改如下:
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) }
即添加
publicPath:'../../'
-
出现跨域问题:
步骤一:
发现原先axios中的url如下
url:'http://xxx.com:8088/,
后面尝试假设www,改为:
url:'http://www.xxx.com:8088/
后台代码的操作
-
同时,要解决跨域问题,需要在后台给SpringBoot项目添加 CORS过滤器
package com.hpsyche.yuanxing.config; import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors