Nuxt：如何显式命名 JS 块？答案

【问题标题】：Nuxt: how to explicitly name JS chunks?Nuxt：如何显式命名 JS 块？
【发布时间】：2021-06-01 07:24:41
【问题描述】：

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

但是Nuxt 给块随机命名，例如925446d.js。

所以我在导入组件时创建了手册 router.js 并指定了块名称：

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

但是Nuxt 没有考虑我的块名称，并继续给块随机命名，这使得很难挑选出哪个块与哪个路由匹配。

有什么建议吗？

【问题讨论】：

【解决方案1】：

如果您希望能够通过名称识别块，Nuxt 实际上有一个内置机制，使用构建配置的属性filename。

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

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

确实存在一些其他选项，see documentation。

【讨论】：

你就是那个男人！有一件事，他们在文档中警告说“在生产中使用基于非散列的文件名时要小心，因为大多数浏览器会缓存资产并且不会在首次加载时检测到更改。”知道如何使用Nuxt.js 解决此问题吗？
@drake035 您可能仍然可以在名称后添加哈希。 [name]_[contenthash].js这里重要的是文件名不同，所以它不会被浏览器缓存。