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")