项目前端部署

项目构建

Node版本需要使用16+，包管理工具使用pnpm，构建完后的制品在dist文件夹下，

# 安装依赖
pnpm install

# 执行打包命令
pnpm run build

使用Nginx部署

嵌入到Jar中

TIP

可以利用Java容器可以将前端嵌入到后端Jar包中，在启动后端时同时一块将前端启动，

修改路由模式

将前端的路由模式配置为hash模式，不可以使用history模式。在前端 src/router/index.ts文件中进行更改

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

createRouter({
  // 将web历史模式替换为hash模式
  history: createWebHashHistory(),
});

修改发布路径和接口前缀

提示

• 默认Vue打包后的产物在放到Web容器根目录下，有时候我们需要放到一个子目录下，此时前端访问就会有问题，需要我们在打包前配置一下前端的发布路径。

• 默认模式下请求路径前缀在嵌入模式中可能会不适用，需要更改一下访问的接口前缀，来让请求直接请求到我们的后端服务上。

修改.env.xx文件

# 发布路径
VITE_PUBLIC_PATH=/front
# 接口前缀
VITE_GLOB_API_URL_PREFIX=/

不同类型的前端项目配置可能不同，需要根据自己的项目进行修改。

添加到后端项目中

警告

这种方式如果接口地址根目录，将会请求异常，等待后续完善

在后端项目中resources目录下创建static目录，将前端构建的产物拷贝到该目录下，可以根据需要创建子目录文件夹，来保证不会与后端中的路径冲突，这样就可以将前端嵌入到后端中了，

添加到后端项目中后，访问时默认需要访问前端所在的目录/index.html#/*，这样用起来会稍显繁琐，我们可以创建一个Controller控制器做一下处理，转发对应请求来简化访问路径。

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 嵌入式h5项目转发控制器, 不用输入 index.html也可以正常访问
 * @author xxm
 * @since 2024/2/10
 */
@Controller
@RequestMapping
public class RedirectH5Controller {
    /**
     * 将/h5/*的访问请求代理到/h5/index.html*
     */
    @GetMapping("/h5/")
    public String toH5(){
        return "forward:/h5/index.html";
    }

}