一、Vue这边准备工作如下
- 将Vue 模式修改为web模式
const router = createRouter({
// hash: createWebHashHistory(), // 设置为哈希模式
// 设置为web模式
history: createWebHistory(),
routes: [
{
path: '/',
redirect: '/home',
},
...redirect, // 统一的重定向配置
...login,
...lock,
...fixedRoutes,
...error,
],
2.请求的url地址修改为本地后端服务器地址
const service = axios.create({
//location对象
// baseURL: location.pathname.split('/')[1]==='tools'? import.meta.env.VITE_TOOLS_URL:import.meta.env.VITE_API_URL,
// baseURL:import.meta.env.VITE_TOOLS_URL,
// 请求路径
baseURL: 'http://localhost:8083',
timeout: 10000,
withCredentials: true,
})
- 打包成静态文件
npm run build
二、springboot 项目中做的事情
- 一般将静态文件放到resources目录下static目录下
- pom.xml 中打包的时候，将静态文件打包进入
<!--指定将resources中配置文件加载到target-->
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.db</include>
<include>static/**</include>
<include>static/assets/**</include>
</includes>
<filtering>false</filtering>
</resource>
- 编写一个 WebMvcConfig 类
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/**
* 拦截器，拦截所有请求，也可以拦截指定请求，多用于登录拦截，是否鉴权
*
* @param registry
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/swagger**/**")
.excludePathPatterns("/webjars/**")
.excludePathPatterns("/v3/**")
.excludePathPatterns("/doc.html")
.excludePathPatterns("/user/*");
}
/**
* 静态资源拦截
*
* @param registry
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//放行所有的静态资源，为了保证vue项目可以正常使用
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/static/");
}
/**
* 解决全局跨域，
*
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 添加映射路径
registry.addMapping("/**")
// 放行哪些原始域
.allowedOriginPatterns("*")
// 是否发送Cookie信息
.allowCredentials(true)
// 放行哪些原始域(请求方式)
.allowedMethods("*")
// 放行哪些原始域(头部信息)
.allowedHeaders("*")
// 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options");
}
}
- 编写一个 webcontroller 将请求转到index.html
@Controller
public class WebController {
@GetMapping("/{path:[^\\.]*}") // 匹配任何没有点的请求 (避免静态资源被拦截)
public String forward() {
// 转发到 index.html
return "forward:/index.html";
}
}
- 将项目mvn打包jar，打包之后，直接输入网站，就可以访问到地址了