Vue3, Apache发布报错

背景： Vue2项目升级到Vue3，还是使用vue－cli5。多页面项目

问题：本地运行没问题，但部署到远程Apache服务器后报错,页面不显示.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Apache上mime.type上已设置 application/javascript js.
所有文件也已经正确发布到Apache服务器上,包括css，js，img等文件夹及文件。
生成的index.html显示为

<!doctype html>
<html lang="de">
    <script src="/abcd/checkBrowser.js"></script>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
        <meta http-equiv="Pragma" content="no-cache">
        <link rel="icon" href="/abcd/favicon.ico">
        <title>Connector</title>
        <script defer="defer" type="module" src="/abcd/js/chunk-vendors.4d5c8dc2.js"></script>
        <script defer="defer" type="module" src="/abcd/js/chunk-common.8fc4e508.js"></script>
        <script defer="defer" type="module" src="/abcd/js/auskunft.a569024d.js"></script>
        <link href="/abcd/css/chunk-vendors.f95bc023.css" rel="stylesheet">
        <script defer="defer" src="/abcd/js/chunk-vendors-legacy.e836a23d.js" nomodule></script>
        <script defer="defer" src="/abcd/js/chunk-common-legacy.ca9920b7.js" nomodule></script>
        <script defer="defer" src="/abcd/js/auskunft-legacy.0414acd0.js" nomodule></script>
    </head>
    <body>
      </body>
</html>

客户端只能见到css文件夹，看不到js文件夹.

vue.config.js 中相关代码段

module.exports = {
  outputDir: 'target/dist/abcd',
  publicPath: '/abcd/',
  pages: {
    auskunft: {
      entry: 'src/mainTEST1.js',
      template: 'public/index.html',
      title: 'TEST1',
      filename: 'test1/spk/index.html',
    },
    verwaltung: {
      entry: 'src/mainTEST2.js',
      template: 'public/index.html',
      title: 'TEST2',
      filename: 'test2/spk/index.html',
    },
  },

本地访问路径: http://localhost:8080/abcd/test1/spk/index.html
远程访问路径:https://x/abcd/test1/spk/index.html

请问问题出在哪里?

不知道你这个问题是否已经解决, 如果还没有解决的话:

以下回答来自chatgpt:
这个问题可能是由于Apache服务器没有正确识别JavaScript模块的MIME类型引起的。您可以尝试以下解决方案来解决这个问题:
1. 确保Apache服务器配置中启用了MIME模块。在Apache的配置文件 httpd.conf 中，找到以下行，并确保没有注释掉（没有前面的#符号）: LoadModule mime_module modules/mod_mime.so
2. 添加 MIME 类型配置。打开 Apache 的 mime.type 文件，通常在 Apache 安装目录的 conf 文件夹中，找到以下行： application/javascript js 确保这行代码存在并未被注释掉。如果没有找到或被注释掉了，添加或取消注释这行代码。
3. 在 Vue CLI 5 中设置 MIME 类型。打开您的 vue.config.js 文件，添加以下代码片段： ```javascript const { DefinePlugin } = require('webpack');
module.exports = { // ...其他配置项
```
 chainWebpack: (config) => {
   config.plugin('define').tap((args) => {
     args[0]['process.env'].VUE_APP_BROWSER_TARGET = JSON.stringify('module');
     return args;
   });
 },
```
}; ```
1. 检查页面的引入路径。确保您的 Vue CLI 5 项目中的 publicPath 配置正确指向了服务器上的路径。根据您提供的信息，应该设置为 "/abcd/test1/spk/"。
如果您按照以上步骤进行操作后仍然遇到问题，可能需要进一步检查服务器的其他配置，如Apache的重写规则、文件权限等。如果您对这些配置不够熟悉，建议您咨询服务器管理员或更具体指定此项目的前端开发人员来调试和排除此问题。
如果您有更多的问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

根据您提供的信息，出现的错误提示是 "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec." 这个错误提示表明，服务器响应了一个空的 MIME 类型，但 HTML 规范强制要求模块脚本使用严格的 MIME 类型检查。

这个问题可能是由于服务器没有正确配置 MIME 类型导致的。您可以尝试在 Apache 服务器上添加以下配置来解决这个问题：

AddType application/javascript js

将上述配置添加到 Apache 的主配置文件或 .htaccess 文件中。这个配置会将 .js 文件的 MIME 类型设置为 "application/javascript"，可以解决浏览器无法正确识别脚本的问题。

另外，您也可以在 Vue3 项目的 vue.config.js 文件中添加以下配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    "@babel/preset-env",
                    {
                      "targets": {
                        "esmodules": true
                      }
                    }
                  ]
                ]
              }
            }
          ]
        }
      ]
    },
  },
};

这个配置会在打包时将 ES6 模块转换为 CommonJS 模块，从而避免浏览器无法正确识别模块的问题。