Springboot+Vue在开发和部署相关问题解决Springboot+Vue在开发和部署相关问题解决
⼀、可能遇到的问题：
1. 跨域
2. 路由使⽤hash或者history
3. 打包时的配置（history）的情况
4. 部署问题
5. 部署之后出现跨域
6. 刷新之后404
7. Nginx如何进⾏端⼝代理
接下来通过我采坑的经历，进⾏⼀⼀详述！
⼆、跨域问题
针对跨域我们需要对Springboot和Vue两部分进⾏处理。
2.1. Sprigboot对于跨域的处理
Springboot这个⽅⾯可能有很多中⽅法：
我们可以添加⼀个设置请求的header头进⾏处理
使⽤@CrossOrigin对某⼀个接⼝进⾏跨域设置
使⽤⼿⼯设置HttpServletResponse对象添加响应头
下⾯的是我针对Springboot的跨域的处理
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import t.annotation.Bean;
import t.annotation.Configuration;
import org.s.CorsConfiguration;
import org.s.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @author 墨龙吟
* @version 1.0.0
nginx部署前端项目* @ClassName CorsConfig.java
* @Description 跨域配置
* @createTime 2019年10⽉25⽇ - 15:58
*/
@Configuration
public class CorsConfig {
@Bean
public FilterRegistrationBean corsFilter(){
CorsConfiguration config =new CorsConfiguration();
// 放⾏哪些原始域
config.addAllowedOrigin("*");
// 是否发送cookie信息
config.setAllowCredentials(true);
// 放⾏的请求⽅式
config.addAllowedMethod("*");
// 放⾏的头部信息
config.addAllowedHeader("*");
/
/ 添加映射路径
UrlBasedCorsConfigurationSource configSource =new UrlBasedCorsConfigurationSource();
// 将新的CorsFilter注册到FilterRegistrationBean中
FilterRegistrationBean bean =new FilterRegistrationBean(new CorsFilter(configSource));
//设置优先级
bean.setOrder(0);
return bean;
}
}
这样我们的关于后端的跨域基本上就完成了。
2.2. Vue端的跨域设置
在我们开发的时候上⾯针对Springboot的跨域配置。我们已经可以开发了，但是在我们要部署到服务器上的时候还是出现跨域问题，所以我这⾥直接就弄好就可以了。
2.2.1. ⾸先是对fig.js⽂件配置
// fig.js
const path =require('path');
function resolve(dir){
return path.join(__dirname, dir)
}
// 项⽬的主要配置⽂件
// 开发测试的是时候使⽤ publicPath: '/' ; 打包部署的时候使⽤ '/blog/'
// publicPath: '/blog/',
publicPath:'/',
outputDir:'dist',
assetsDir:'static'
devServer:{
port:8080,
// 是上线所需的额外配置，本地测试的需要需要注释掉
// publicPath: '/',
proxy:{// 配置跨域
'/api':{
// 这⾥后台的地址模拟的；应该填写你们真实的后台接⼝
target:'localhost:9999/api',
ws:true,
// 允许跨域
changOrigin:true,
pathRewrite:{
// 请求的时候使⽤这个api就可以
'^/api':''
}
}
}
}
}
2.2.2. 修改路由⽂件
import Vue from'vue'
import Router from'vue-router'
import Cookies from'js-cookie'
Vue.use(Router)
let router =new Router({
// 切换路由为history模型
mode:'history',
// 基础路径，/blog/ 这⾥和fig.js⾥⾯publicPath相对应。
base:'/blog/',
routes:[
{
// ...
}
]
});
export default router
2.2.
3. 配置axios中的baseURL
⼀般都是要写⼀个关于axios和get、post分装的⼯具类，我们修改axios的默认配置信息
axios.defaults.baseURL ='localhost:9999/api';
axios.defaults.withCredentials =true;
三、路由模型的选择和刷新404问题
3.1. 两种路由的区别
路由使⽤hash或者history，这两中区别如下：
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学⾥的散列运算）。
⽐如这个 URL：www.abc/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页⾯。
history —— 利⽤了 HTML5 History Interface中新增的 pushState() 和 replaceState() ⽅法。（需要特定浏览器⽀持）这两个⽅法应⽤于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进⾏修改的功能。只是当它们执⾏修改时，虽然改变了当前的 URL，但浏览器不会⽴即向后端发送请求。
3.2. 两种路由的优缺点：
Hash路由：
优点：
1. 实现简单，兼容性好（兼容到ie8）
2. 绝⼤多数前端框架均提供了给予hash的路由实现
3. 不需要服务器端进⾏任何设置和开发
4. 除了资源加载和ajax请求以外，不会发起其他请求
缺点：
1. 对于部分需要重定向的操作，后端⽆法获取hash部分内容，导致后台⽆法取得url中的数据，典型的例⼦就是
的oauth验证
2. 服务器端⽆法准确跟踪前端路由信息
3. 对于需要锚点功能的需求会与⽬前路由机制冲突
History路由
优点：
1. 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
2. 绝⼤多数前段框架均提供了browser的路由实现
3. 后端可以准确跟踪路由信息
4. 可以使⽤history.state来获取当前url对应的状态信息
缺点：
1. 兼容性不如hash路由(只兼容到IE10)
2. 需要后端⽀持，每次返回html⽂档
3.3. 使⽤History部署的时候刷新404问题解决：
因此可以说，hash模式和history模式都属于浏览器⾃⾝的特性，Vue-Router只是利⽤了这两个特性（通过调⽤浏览器提供的接⼝）来实现前端路由。
我们使⽤history的时候是没有#虽然美观，但是会有问题 **不怕前进，不怕后退，就怕刷新，F5，（如果后端没有准备的话），因为刷新是实实在在地去请求服务器的。**这⾥就需要我们在服务器⾥⾯配置⼀下
我们使⽤Springboot项⽬所以正常都会安装Tomcat服务器，当我们把Vue项⽬打包之后放到webapps。
这⾥的项⽬⽬录blog也是和我们上⾯配置的相对应的。
在我们的项⽬⾥⾯添加⼀个WEB-INF⽬录。⾥⾯添加l，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="/xml/ns/javaee"xsi="/2001/XMLSchema-instance"
schemaLocation="/xml/ns/javaee
/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
这样⼦，我们再次刷新之后就不会出现404的问题了。
四、Nginx代理的问题
我们先从安装开始！
4.1. Centos8安装Nginx
⼀般来说我们⾃⼰安装软件的话，⼀般都放到/opt⽬录⾥⾯。将安装包拷贝到/opt⽬录之后创建⼀个nginx的⽬录，执⾏解压。
# 创建nginx⽬录解压安装包然后进⼊解压后的⽬录
mkdir nginx &&tar -zxvf nginx-1.17. &&cd nginx-1.17.9
接着安装Nginx所需要的⼀些依赖
yum install -y pcre pcre-devel zlib zlib-devel openssl openssl-devel
然后就进⾏配置、编译和安装了
# /opt/nginx 就是安装路径，这个看你是安装到哪个⽬录⾃⼰配置吧
.
/configure --prefix=/opt/nginx --with-http_stub_status_module --with-http_ssl_module &&make&&make install
最后还需要将nginx添加到服务⾥⾯，⽅便我们去通过systemctl启动和停⽌。
对于systemctl相关的serivce⽂件⼀般都是在/etc/systemd/system/⽬录⾥⾯的，但是，⾥⾯存放的⼤部分⽂件都是符号链接，指向⽬录/usr/lib/systemd/system/，真正的配置⽂件存放在/usr/lib/systemd/system/⽬录的。所以哪个⽬录都可以，看⾃⼰⾼兴吧！
创建⼀个nginx.service⽂件，⾥⾯的内容如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。