Vue3打包部署到SpringBoot3的详细步骤

目录

• vue3项目
• 1.先在vite.config.js中添加 base: './'
• 2.如果设置了用同一接口前缀用来修改请求路径的端口号的话，要进行删除或注释
• 3.配置路由模式
• 4.将vue打包
• SpringBoot3项目
• 1.在pom.XML文件中添加依赖
• 2.将vue打包的vite文件里面的文件整合到SpringBoot中
• 3.检查index.html
• 4.编写跳转控制器
• 5.401报错
• 访问
• 总结

Vue3项目

1.先在vite.config.js中添加 base: './'

export default defineConfig({
  base: './',
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileU编程客栈RLToPath(new URL('./src', import.meta.url))
    }
  }
})

在vite官网中是这样说的：

简单来说就是：使用相对路径，可以让项目能在任意路径下部署，无需提前固定公共基础路径，解决了部署环境不确定的问题。

具体可以通过Vite官网来查看：构建生产版本 | Vite 官方中文文档

2.如果设置了用同一接口前缀用来修改请求路径的端口号的话，要进行删除或注释

const baseUrl='/api';
const instance = axIOS.create({baseURLhttp://www.devze.com:baseUrl});
//这里我设置了统一接口前缀/api，可以直接注释了

server: {
    proxy: {
      '/api': {//处理以api为前缀的请求    
        target: 'http://localhost:8081',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

这是因为在Vite的官网上说了，这么一句话，Configure custom proxy rules for the dev server，他翻译过来就是：为开发服务器配置自定义代理规则。

即server.proxy 属于 开发服务器（dev server） 的配置项，用于 “在开发环境下配置代理规则，以解决跨域请求问题”。所以当不删除的话，修改端口不起作用，但是api却加再了请求路径上，导致，访问不到，而报404.

具体可看Vite官网的这个位置：https://vite.dev/config/server-options.html#server-proxy

3.配置路由模式

import { createRouter, createWebHashHistory } from 'vue-router'

这建议使用Hash模式，因为：他不需要再服务器层面上进行任何特殊处理。

虽然hash模式访问请求，输入URL会在URL中加入#，但是

• 访问 /sign 时，实际 URL 是 http://xxx.com/#/sign
• 访问 /addUser 时，实际 URL 是 http://xxx.com/#/addUser

这里的关键是：# 及其后面的内容（如&nbsphpp;#/sign）不会被发送到服务器。服务器收到的请求始终是根路径 /，因此就能返回 index.html，使用了history模式的路由需要再SpringBoot上对每个页面的路径进行对应的配置，但是使用hash模式，在SpringBoot中只用配置/根路径

hash模式官网：https://router.vuejs.org/zh/guide/essentials/history-mode.html#Hash-%E6%A8%A1%E5%BC%8F

html5模式官网：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#HTML5-%E6%A8%A1%E5%BC%8F

4.将vue打包

npm run build

打包完成后会生成dist文件夹

SpringBoot3项目

1.在pom.xml文件中添加依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.将vue打包的vite文件里面的文件整合到SpringBoot中

将ideax.html放到resources的templates下

其他的文件都放到static下

3.检查index.html

index.html的作用：index.html 是前端应用的唯一入口文件，所有页面的渲染、资源加载和路由跳转都依赖它来启动，是连接静态资源与浏览器运行环境的核心桥梁。

<script type="module" crossorigin src="./assets/index-6G-g-WH_.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BgquJFG5.css" rel="external nofollow" >

在index.html中检查，访问js和css的文件路径是否正确，如果不正确，访问不到css或js，就会报出404错误

4.编写跳转控制器

作用：接受/根路径并跳转到index.html

@Controller
public class BasicController {
    @GetMappihttp://www.devze.comng("/")
    public String Index() {
        return "index";
    }
}

结合上述路由中hash模式的特点，# 及其后面的内容（如 #/sign）不会被发送到服务器，让前端的请求路径全都可以到index.html

5.401报错

如果出现401报错，就请仔细查看是否是自己的拦截器是否拦截了

"static/**",        //静态资源的路径
"/"，        //访问indejsx.html的根路径

"/index.html",     

或则也有可能是其他的路径被拦截，导致无法正常访问，而报出401

访问

因为我这里用的是hash模式的路由，所以访问时要在端口或域名后面加/#

http:localhost:端口号/#/path

我的这篇文章只能用作参考，具体问题，还要看具体情况

总结

到此这篇关于Vue3打包部署到SpringBoot3的文章就介绍到这了,更多相关Vue3打包部署SpringBoot3内容请搜索编程客栈(www.devze.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程客栈(www.devze.com)！