Vue+Vite 配置多页面整合Springboot项目

vue做多页入口

最近在做项目时候遇到这种需求，就是需要将vue开发的项目打包后整合到springboot项目中，当时认为很easy，等我把所有前端页面写好后发现并不是那样，因为在spingboot项目中我们如果直接访问一个页面是这样的http://localhost/pageA.html，但是我们如果不把vue拆解成多页面时（只是新增路由），那么我们打包出来的页面只会只有一个html，如果我们想在springboot访问其他vue页面时，路由会失效（比如：vue路由中我们配置了path:‘pageA’，name:‘pageA’,然后我们去直接访问：http://localhost/pageA.html会发现压根找不到这个页面，因为我们虽然配置了路由，但是其实做的就是一个单页面开发。那么我们如何解决这个问题呢？）

修改原有的项目结构

我们需要修改原有的项目结构变为多个单页面的结构，每个单页面放在pages文件夹下，并且每个单页面文件夹都有自己的结构：
比如：src/pages/pageA这个单页面

	----src
		----page
			----pageA
					index.html
					App.vue
					main.js
					router.js

目录结构如上所示，其实每个单页面就像一个模块，拥有自己的路由，入口文件，main.js等。所以我们只需要创建这样的目录结构即可，然后就是配置vite.config.ts，这里我直接拿我的实际项目目录截图给大家看

vite.config.js配置

import { fileURLToPath, URL } from 'node:url'
import { resolve } from "path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
  //注意：如果要打包放入springboot则这里要注释，这是代理配置
  // server: {
  //   proxy: {
  //     "/api": {
  //       target: "http://localhost:88",//本机测试
  //       changeOrigin: true,
  //       // rewrite: (path) => path.replace(/^\/api/, ""),
  //     },
  //   },
  // },
  root: "src/pages",//这里路径和每个单页面中inde.html引入的路径有关系 那边引入js会自动从该配置路径下寻找
  build: {
    outDir: "../../dist",//打包后输出文件
    rollupOptions: {//rollupOptions.input可以配置多页面入口 如果没有这个则默认是{index:'index.html'}
      input: {//这里的__dirname就是指的该vite.config.js文件所在的路径 
        ele: resolve(__dirname, `src/pages/ele/index.html`),
        elec: resolve(__dirname, `src/pages/elec/index.html`),
        pressure: resolve(__dirname, `src/pages/pressure/index.html`),
        sv: resolve(__dirname, `src/pages/sv/index.html`),
      }
    },
  },
})

运行npm run build看看我们生成的结构：

OK 直接将打包文件放入springboot项目中

启动springboot项目，访问对应目录下index.html即可，千万注意：多页面访问时http://localhost/ele/index.html中的/index.html不可省略（除非你做了其他配置），要不也是无法访问到的

vue单独启动本地测试访问时

如果我们单独调试vue单页面访问时，这里需要先开启vite.config.js中的代理配置（server.proxy），上面有的被我注释了
如需访问则直接在页面中输入对应页面目录即可，不必像springboot需要输入完整的http://localhost/目录/index.html,只需要http://localhost:3000/目录/即可，还有就是如果单页面里面也需要配置路由时，只需要在自己的页面目录下创建router.js文件配置，在main.js中引入即可使用，但仅限于单页面中不同模块的跳转，如果是想要多页面之间的跳转则需要在外部创建router.js文件进行配置出了 ~~我这块还没研究