CODEWITHSUNDEEP
vue.jswebpackvue-cli-3
Tomer
Tomer

Reputation: 17940

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

I'm using vue-cli 3.3.0 and I use code splitting in my router.js file:

...
{
      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" */)
    },
...

Everything works fine in dev mode, when the files are served by the dev server. But after running build I get a 404 error from my server (written in go.

I see it is trying to access a file with a very long name:

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

If I manually shorten the file name (in the dist folder), it manages to load it. So the problem is definitely the length of the file name.

This is my vue.config.js:

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

Is it possible to control the generated file name?

Upvotes: 3

Views: 1068

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29179

Change the config to:

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

That should eliminate the long module name.

If still too long, the id (module identifier) is including your long route. Use [hash] instead of [id]. That will be the hash of the id instead of the id itself.

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

Now your filename will reflect the route and the contents of the file.

Also the convention is to put the code split comment first.

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

Upvotes: 3

Related Questions