如何更改 VuePress 生成的块名称

Question

我想将 Vuepress 用于文档。 我们的文档是 100% 静态的，并且每个内容都是私有的。

出于业务原因，我们应该通过路由来配置 RBAC。 例如，/foo 只能由admin 访问，而/bar 可以同时由admin 和employee 访问。

但是，webpack 输出似乎不适合基于路由的授权。

每个编译的 js 文件都在一个目录中，assets/js。 例如，我不能应用基于路由的反向代理策略，因为我不知道哪些文件属于哪些路由，例如 2.99194163.js 是用于 /foo 还是 /bar。要知道它，必须阅读每个编译的js文件，这是不适用的。

Vuepress 的默认 webpack 配置会发生这种情况。

output: {
  filename: 'assets/js/[name].[chunkhash:8].js',
}

可以像这样按路线组织吗？

assets/js
├── index
│   ├── app.0cb5ae60.js 
│   └── 10.059a7fe4.js
├── foo
│   ├── 11.62278c9d.js
│   ├── 12.9652ff3d.js
│   └── 13.c6c6b9fd.js
└── bar
    ├── 14.c8879eeb.js
    ├── 2.99194163.js
    ├── 3.7d54bf6f.js
    ├── 4.0c81bce7.js
    ├── 5.e47d5dbb.js
    ├── 6.004df3e0.js
    ├── 7.966197b8.js
    ├── 8.4bd54fba.js
    └── 9.78a40dc1.js

提前致谢！

Answer 1

可以使用vuepress-plugin-named-chunks插件修改VuePress为每个页面生成的js块的名称和路径...

1. 安装插件
2. 更改.vuepress\config.js

module.exports = {
  plugins: [
    [
      "named-chunks",
      {
        pageChunkName: function(page) {
          let chunkPath = page.path.substring(1) + page.key;
          // console.log(chunkPath);
          return chunkPath;
        }
      }
    ]
  ]
};

在内部使用webpackChunkName"magic comment"

如果您的 pageChunkName 返回的字符串不仅包含文件名，还包含路径，重要的是不要包含前导斜杠 - guide/readme.js 可以工作，/guide/readme.js 不会.....