vite vue3 下配置 history 模式路由

dev 模式

• 利用vite 配置代理，可以解决前端浏览器限制跨域问题（当然后端要自己配置好）exportdefaultdefineConfig({// 配置在打包时，保障所有css\js能被找到 base:'./',//自带配置 plugins:[vue()], resolve:{ alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}},// 配置/api代理 server:{ proxy:{'/api':{ target:'http://localhost:8080', changeOrigin:true,rewrite:(path)=> path.replace(/^\/api/,'')}}},//打包前先清空原有打包文件 build:{ emptyOutDir:true,}})配置.env在dev 环境，默认会读取这个里面的内容# .env.developmentVITE_BASE_API=/apiVITE_BASE_URL=/vaccinationInfoVITE_BASE_ENV=dev配置axiosimport axios from"axios";const service = axios.create({ baseURL:import.meta.env.VITE_BASE_APIasstring, timeout:3600})这样在dev环境下，就可以使用代理来访问后端了

pro模式

打包时，会自动识别 .env.production

# .env.production 
VITE_BASE_API=http://localhost:8080
VITE_BASE_URL=/vaccinationInfo
VITE_BASE_ENV=pro

由于生产模式时，代理配置时不生效的，所以VITE_BASE_API直接指向服务器地址

history模式 时 还要进行以下配置

router\index.ts

history: createWebHistory(import.meta.env.VITE_BASE_URL as string),

用一个指定的url地址

nginx 配置

当然，打包后放到nginx也需要配置

  location /vaccinationInfo {
        alias  /usr/share/nginx/html/vaccinationInfo;
        index  index.html index.htm;
        try_files $uri $uri/ /vaccinationInfo/index.html; # 解决页面刷新404
    }    

然后在html中新建vaccinationInfo文件夹，把打包好的文件丢进去就行

后端配置

写一个配置类

@ConfigurationpublicclassWebMvcConfigimplementsWebMvcConfigurer{/**
     * 允许跨域，以及自行配置
     *
     * @param registry 跨域注册器
     */@OverridepublicvoidaddCorsMappings(CorsRegistry registry){
        registry.addMapping("/**").allowedOriginPatterns("*")// SpringBoot2.4.0以上[allowedOriginPatterns]代替[allowedOrigins].allowedMethods("*").maxAge(3600).allowedHeaders("*").allowCredentials(true);}}

如果需要配置拦截器拦截JWT，可以采取以下操作

@ConfigurationpublicclassWebMvcConfigimplementsWebMvcConfigurer{privateJWTTokenInterceptor jwtTokenInterceptor;privateInterceptorPathBean interceptorPathBean;@AutowiredpublicvoidsetJwtTokenInterceptor(JWTTokenInterceptor jwtTokenInterceptor){this.jwtTokenInterceptor = jwtTokenInterceptor;}@AutowiredpublicvoidsetInterceptorPathBean(InterceptorPathBean interceptorPathBean){this.interceptorPathBean = interceptorPathBean;}/**
     * 允许跨域，以及自行配置
     *
     * @param registry 跨域注册器
     */@OverridepublicvoidaddCorsMappings(CorsRegistry registry){
        registry.addMapping("/**").allowedOriginPatterns("*")// SpringBoot2.4.0以上[allowedOriginPatterns]代替[allowedOrigins].allowedMethods("*").maxAge(3600).allowedHeaders("*").allowCredentials(true);}/**
     * 添加API拦截器，对所有数据API进行拦截
     *
     * @param registry 拦截器注册器
     */@OverridepublicvoidaddInterceptors(InterceptorRegistry registry){// 注册拦截规则InterceptorRegistration interceptorRegistration = registry.addInterceptor(jwtTokenInterceptor);// 拦截配置
        interceptorRegistration.addPathPatterns(interceptorPathBean.getInclude());}}

重写addInterceptors 方法

配置JWT拦截器

@ComponentpublicclassJWTTokenInterceptorimplementsHandlerInterceptor{@ResourceprivateJWTResult jwtResult;/**
     * 拦截对数据API的请求，判断jwt令牌是否有效，没有则返回401
     *
     * @param request  请求
     * @param response 响应
     * @param handler  处理器
     * @return 是否继续执行，true继续执行，false不继续执行
     * @throws Exception 异常
     */@OverridepublicbooleanpreHandle(HttpServletRequest request,HttpServletResponse response,Object handler)throwsException{//非简单请求会预先使用OPTIONS方法请求一次，这里直接返回trueif(request.getMethod().equals("OPTIONS")){
            response.setStatus(200);//在拦截器中设置允许跨域
            response.setHeader("Access-Control-Allow-Origin","*");
            response.setHeader("Access-Control-Allow-Headers","*");
            response.setHeader("Access-Control-Allow-Methods","*");
            response.setHeader("Access-Control-Allow-Credentials","true");
            response.setHeader("Access-Control-Max-Age","3600");returntrue;}//业务逻辑，自行发挥//这才是真正的请求，需要验证jwt令牌//请求数据API时的目标urlString path = request.getRequestURI();String jwt = request.getHeader("Authorization");//对每次数据API请求进行拦截，如果jwt令牌不合法，则返回401；通过则继续放行，因此数据controller不需要再次判断jwt令牌是否合法boolean verify = jwtResult.verify(jwt,path);//如果校验不通过if(!verify){
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write("{\"code\":401,\"msg\":\"jwt校验失败\"}");}return verify;}}

以上是重点处理 OPTIONS 预先请求，这个在非简单请求时会预先发出，典型场景就是打包后的前端工程，在请求后端是就会发出这个OPTIONS请求。

后面那些就是业务逻辑，自行发挥即可

补充几个文件

InterceptorPathBean

@Data
@Component
@ConfigurationProperties(prefix = "interceptor-config.path") // 配置文件的前缀
public class InterceptorPathBean {
    /*
     * 需要拦截的路径
     */
    private List<String> include;
}

application.yml

# 拦截器路径拦截
interceptor-config:
  path:
    #该路径下任何类型请求均拦截
    include:
      - /telInfo/**
      - /vaccinationInfo/**

以上，就可以在vue中站着用history模式了