开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情

背景

  由于部分页面非常简单、无需CDN、访问量小，直接使用后台的包来代理即可。故本项目介绍此类项目如何进行配置。

1.配置Vue3项目

  由于SpringBoot Jar包可能被Nginx代理而不放在80端口，故Vite打包后的路径只能是相对路径，而不能是绝对路径，故应该在 vite.config.js 中添加 base 配置：

export default defineConfig({
    base: './'
});

  然后再在 index.html 处，将所有的绝对路径，改为相对路径，就像下面这样：

这一部分，详参：vue3+vite的项目如何将打包后的绝对路径改为相对路径，解决Nginx反向代理多个前端web网站，找不到静态资源js、css等，通过加不同的文件夹来路由到不同的前端

2.配置Vite输出路径

  由于是使用简易的 static 代理静态页面，所以需要指定到对应的路径，并在每次打包时，清空上一次的js和css文件。故可以在 vite.config.js 中配置：

export default defineConfig({
    // 打包配置
    build: {
    outDir: "../../src/main/resources/static", //指定输出路径，可根据实际情况修改
    assetsDir: "assets", // 指定生成静态资源的存放路径，不要改动
    emptyOutDir: true, //打包前先清空原有打包文件
  },
});

3.一键部署

  当我们已经使用 npm run build打包好了文件，放在了 static 下，我们就可以参考这篇：《IDEA自动部署jar包到Linux服务器》进行自动部署。

其他须知

  如果项目有多个版本的 NodeJS ，可以使用 nvm 进行管理，不然会导致运行命令行失败。详参我这一篇内容：《Win10安装nvm1.1.10的坑》。