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代码拆分会创建一个名称非常长且无法提供服务的文件

1 个答案: