从 Vue CLI 切换到使用 Spring-Boot 作为后端的 Vite，开发服务器未按预期工作

Question

有多种方法可以将 Vue 项目集成到 Spring Boot 项目中。

使用基于 webpack 的构建工具（例如 vue-cli），我已经通过以下方式成功完成了几次：

• 配置outputDir构建过程，使其输出放置在例如/static/dist/（最终）Spring Boot 项目的Java 类路径内。这样，这些静态资源就可以通过 URL 提供服务/dist/...。要在生成中获得正确的 URL，当然index.html 必须publicPath将其设置为/dist/。
• 使用 HTML5 模式（历史模式）配置 Vue Router，其中一些baseUrl不等于/（在大型生产系统中是必要的）和不等于 /dist/- 假设它baseUrl等于/vue/。现在，在 Spring Boot 中，转发所有匹配的请求/vue/**，/dist/index.html以便 Vue Router 可以接管处理给定的 URL。

这样我在生产中就没有出现任何问题。在开发模式下使用提供的开发服务器的行为没有差异 - 实时重新加载（HMR）按预期工作，并且与 Spring Boot 后端通信也没有问题（当然必须为开发服务器配置代理）。

在生产模式下，使用此设置（baseUrl构建过程和 Vue 路由器的不同 s）与 Vite似乎完全没问题！（至少到目前为止我没有遇到任何问题）

但在开发模式下，我遇到了内置开发服务器的几个问题。可能是由于baseUrl我收到的不同信息，例如，如果我重新加载浏览器，则会出现以下消息：

服务器配置了公共基本 URL /dist/ - 您是否打算访问 /dist/vue/？

此外，我在配置开发服务器的代理时遇到问题。特定的 URL 可以非常简单地代理，但我不知道如何以更通用的方式配置代理，就像我在基于 webpack 的构建中所做的那样（不会破坏最初在 Vite 中运行良好的实时重新加载）。

总而言之，它非常复杂且难以解释。为此，我在此github 存储库中创建了一个非常简单的演示项目。

欢迎评论、帮助和 PR！;-)

Answer 1

关于主要问题，据我了解问题、用例和期望的行为。生产构建似乎按预期工作，但开发构建+开发服务器正在崩溃，IMO 解决该问题的最简单方法是根据构建模式在 vite 配置中条件值。这是我想出的例子：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

export default defineConfig(({ mode }) => ({
  plugins: [vue()],
  base: mode === 'production' ? '/vite-project/' : '/',
  build: {
    outDir: '../../../../target/classes/static/vite-project',
    assetsDir: '',
    rollupOptions: {
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`
      }
    }
  },
  server: {
    proxy: {
      '.*': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        ws: false,
        rewrite: (path) => path.startsWith('/t/') ? path : null
      }
    }
  },
  resolve: {
    alias: {
      // eslint-disable-next-line no-undef
      '@': path.resolve(__dirname, 'src'),
    }
  },
  define: {
    'process.env.MY_CUSTOM_BASE': '"t"',
  },
}))