Vue-cli 代码拆分创建一个名称很长的文件，无法提供服务

Question

我正在使用 vue-cli 3.3.0，并且在我的 router.js 文件中使用了代码拆分：

...
{
      path: "/compliance_checks",
      name: "compChecks",
      meta: {
        requiresAuth: true
      },
      component: () =>
        import("@/shared/policies/compliance/ComplianceChecksPage" /* webpackChunkName: "ComplianceChecksPage" */)
    },
    {
      path: "/firewalls",
      name: "firewalls",
      meta: {
        requiresAuth: true
      },
      component: () =>
        import("@/shared/policies/firewall/ContainerFirewallsPage" /* webpackChunkName: "ContainerFirewallsPage" */)
    },
...

当文件由开发服务器提供时，在开发模式下一切正常。但是在运行构建之后，我的服务器出现了 404 错误（用 go 编写。

我看到它正在尝试访问一个名称很长的文件:

http://localhost:8080/js/AssurancePoliciesPage~ComplianceChecksPage~ContainerFirewallPage~ContainerFirewallsPage~PolicyPage~R~78d0e4db.AssurancePoliciesPage~ComplianceChecksPage~ContainerFirewallPage~ContainerFirewallsPage~PolicyPage~R~78d0e4db.15622d75.js

如果我手动缩短文件名（在 dist 文件夹中），它会设法加载它。所以问题肯定是文件名的长度。

这是我的 vue.config.js:

chainWebpack: config => {
    config.output.chunkFilename(`js/[name].[id].[chunkhash:8].js`);
  },

是否可以控制生成的文件名？

Answer 1

将配置更改为：

chainWebpack: config => {
    config.output.chunkFilename(`js/[id].[chunkhash:8].js`);
  },

那应该消除长模块名称。

如果仍然太长，id（模块标识符）包括您的长路线。使用 [hash] 而不是 [id]。那将是 id 的散列而不是 id 本身。

chainWebpack: config => {
    config.output.chunkFilename(`js/[hash].[chunkhash:8].js`);
  },

现在您的文件名将反映路径和文件的内容。

另外，惯例是将代码拆分注释放在第一位。

import( /* webpackChunkName: "ComplianceChecksPage" */ "@/shared/policies/compliance/ComplianceChecksPage")

Vue-cli 代码拆分创建一个名称很长的文件，无法提供服务

Vue-cli code splitting creates a file with very long name that can't be served

webpack

vue.js

vue-cli-3