如何更改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-plugin-named-chunks

.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

如果您的pageChunkName返回的字符串不仅包含文件名，还包含路径，重要的是不要包含反斜杠-"magic comment"将起作用，guide/readme.js将不起作用.....