Nuxt:如何显式命名 JS 块? [英] Nuxt: how to explicitly name JS chunks?

问题描述

我在静态站点生成模式下使用 Nuxt.我的项目中的一个要求是仅部署某些路由，每个路由都有各自的资产.

I'm using Nuxt in static site generation mode. One requirement in my project is to deploy only certain routes, each with their respective assets.

但是 Nuxt 给了块随机的名字，比如 925446d.js.

But Nuxt gives chunks random names like 925446d.js.

所以我在导入组件时创建了一个手动 router.js 并指定了块名称:

So I created a manual router.js and specified chunk names while importing my components:

component: () => import(/* webpackChunkName: "about" */ '~/pages/about.vue').then(m => m.default || m)

但是Nuxt 并没有考虑我的块名称，而是继续给块随机命名，这使得挑出哪个块走哪条路线变得非常困难.

But Nuxt doesn't take my chunk names into account and continues to give chunks random names, making it super difficult to single out which chunk goes with which route.

有什么建议吗?

推荐答案

如果你希望能够通过名称识别块，Nuxt 实际上有一个内置机制来做到这一点，使用属性 filename构建配置.

If you want to be able to identify chunks by name, Nuxt actually has a built-in mechanism do to that, using the property filename of the build config.

您可以在 nuxt.config.js 文件中添加以下内容:

You can add the following in your nuxt.config.js file:

{
  // ...
  build: { filenames: { chunk: () => '[name].js' } }
}

确实存在一些其他选项，查看文档.

Some additional options do exist, see documentation.

这篇关于Nuxt:如何显式命名 JS 块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！