vite打包部署后，遇到Failed to load module script

Question

请教一个vite打包的问题，我用springboot3+vue3+vite5做了一个项目，本地运行正常，但打包时遇到了问题。即打包后，dist文件夹中只有几个文件，不知是否正常？另外，出现了下面问题，不知是什么原因？
打包放到服务器上后，首页（登录页面）可以访问，但输入用户名和密码后点击登录，出现下面错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
TypeError: Failed to fetch dynamically imported module: http://localhost/views/index.vue
TypeError: Failed to fetch dynamically imported module: http://localhost/views/index.vue

打包方式一：打包命令运行结果如下

> vite build

vite v5.3.5 building for production...
✓ 1571 modules transformed.
dist/index.html                      0.48 kB │ gzip:   0.32 kB
dist/assets/bgimg-DjLelNA2.jpeg  7,784.52 kB
dist/assets/index-Dw9PIufV.css     324.93 kB │ gzip:  44.90 kB
dist/assets/index-BGWgzp1d.js      628.88 kB │ gzip: 213.56 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 3.77s

打包方式二：我在vite.config.js中加上下面配置：

build: {
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        // 分包
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  }

这次打包出的文件多了一些，打包命令运行结果如下：

 > vite build

vite v5.3.5 building for production...
✓ 1571 modules transformed.
Generated an empty chunk: "@floating-ui".
Generated an empty chunk: "dayjs".
Generated an empty chunk: "lodash-unified".
Generated an empty chunk: "memoize-one".
Generated an empty chunk: "normalize-wheel-es".
Generated an empty chunk: "vue".
dist/index.html                                          1.54 kB │ gzip:  0.54 kB
dist/assets/bgimg-DjLelNA2.jpeg                      7,784.52 kB
dist/assets/index-_rFj-IOj.css                           1.60 kB │ gzip:  0.51 kB
dist/assets/element-plus-BJZDLfJd.css                  323.34 kB │ gzip: 44.55 kB
dist/assets/dayjs-l0sNRNKZ.js                            0.00 kB │ gzip:  0.02 kB
dist/assets/vue-l0sNRNKZ.js                              0.00 kB │ gzip:  0.02 kB
dist/assets/@floating-ui-l0sNRNKZ.js                     0.00 kB │ gzip:  0.02 kB
dist/assets/normalize-wheel-es-l0sNRNKZ.js               0.00 kB │ gzip:  0.02 kB
dist/assets/lodash-unified-l0sNRNKZ.js                   0.00 kB │ gzip:  0.02 kB
dist/assets/memoize-one-l0sNRNKZ.js                      0.00 kB │ gzip:  0.02 kB
dist/assets/pinia-plugin-persistedstate-RV7uh3T-.js      1.94 kB │ gzip:  0.90 kB
dist/assets/pinia-CXYsz0yr.js                            3.84 kB │ gzip:  1.97 kB
dist/assets/@vueuse-DFh7vuZN.js                          6.08 kB │ gzip:  2.64 kB
dist/assets/@ctrl-r5W6hzzQ.js                           14.13 kB │ gzip:  4.76 kB
dist/assets/async-validator-DKvM95Vc.js                 16.90 kB │ gzip:  5.41 kB
dist/assets/@popperjs-D9SI2xQl.js                       19.77 kB │ gzip:  7.37 kB
dist/assets/lodash-es-CbX0-HeL.js                       22.01 kB │ gzip:  7.80 kB
dist/assets/vue-router-DyUJW7uH.js                      23.12 kB │ gzip:  9.48 kB
dist/assets/axios-DTyqpfTh.js                           34.60 kB │ gzip: 13.93 kB
dist/assets/@vue-5jp81eLw.js                            70.09 kB │ gzip: 27.98 kB
dist/assets/index-lL5Sh4cQ.js                          104.57 kB │ gzip: 41.58 kB
dist/assets/element-plus-BKnJWsug.js                   140.07 kB │ gzip: 47.39 kB
dist/assets/@element-plus-C7iXwfg3.js                  172.90 kB │ gzip: 44.58 kB
✓ built in 3.70s

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的信息，您在使用 Vite 打包 Spring Boot 3 + Vue 3 + Vite 5 项目时遇到了两个问题：

1. 打包后 dist 文件夹中文件数量较少：这可能是由于 Vite 的打包配置或者项目结构导致的。Vite 默认会将项目代码和依赖打包到 dist 目录下，但是具体包含哪些文件，取决于配置和项目结构。

2. 服务器上部署后，动态导入模块失败：错误提示表明服务器返回了错误的 MIME 类型 "text/html" 而不是期望的 JavaScript 模块类型。这通常是由于服务器配置不正确或项目配置问题导致的。

解决步骤：

问题一：打包文件数量较少

1. 检查 vite.config.js 配置：确认配置文件中没有错误或遗漏，特别是输出目录和资源处理部分。
2. 检查项目结构：确保所有需要打包的资源都在 Vite 可以处理的目录下。
3. 使用 Vite 的分析工具：Vite 提供了一个分析工具，可以帮助您了解打包后的文件构成。可以通过运行 vite build --report 来生成报告。

问题二：动态导入模块失败

1. 服务器配置：确保服务器正确配置了 MIME 类型，特别是对于 .js 文件，应该返回 text/javascript。
2. 检查 index.html 中的脚本引用：确保动态导入的模块路径正确，并且服务器能够正确解析这些路径。
3. 使用相对路径或绝对路径：在开发环境中使用 http://localhost 是没有问题的，但在生产环境中，应该使用相对路径或配置好的域名。

编程示例：

假设您的项目结构和配置都是正确的，这里提供一个简单的示例来说明如何动态导入模块：

// 假设这是您的登录逻辑文件 login.js
async function login(username, password) {
  try {
    // 动态导入模块
    const indexModule = await import('/views/index.vue');
    // 使用导入的模块
    indexModule.default();
  } catch (error) {
    console.error('模块导入失败:', error);
  }
}

// 调用登录函数
login('username', 'password');

环境版本信息：

• Vite: 5.3.5
• Vue: 3.x
• Node.js: 请确保使用的是与 Vite 兼容的版本

注意事项：

• 确保您的服务器配置了正确的路由和静态资源服务，特别是对于单页应用。
• 如果您使用的是 Spring Boot，可能需要配置 Spring Boot 以正确处理静态资源和路由。

希望这些信息能帮助您解决问题。如果问题仍然存在，请提供更多的信息，例如服务器配置或更详细的错误日志。