Разделение кода Vue-cli создает файл с очень длинным именем, который не может быть обработан - PullRequest
Новая
       15

Разделение кода Vue-cli создает файл с очень длинным именем, который не может быть обработан

1 голос
/ 07 марта 2019

Я использую 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" */)
    },
...

Все отлично работает в режиме dev, когда файлы обслуживаются сервером dev,Но после запуска сборки я получаю ошибку 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`);
  },

Можно ли управлять сгенерированным именем файла?

1 Ответ

1 голос
/ 07 марта 2019

Измените конфигурацию на: 

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