如何通过修改vue.config.js创建具有嵌套子目录页面的多页Vue.js应用程序？

Question

我有一个多页面的Vue.js应用程序，在domain/legal、domain/submit等网页中都有工作页面。我是使用Vue.js的pages (即自定义vue.config.js)来实现的。

换句话说，我已经成功让上述内容工作。

现在，我想要在一个新的子目录级别下进一步实现嵌套页面（除了我已经拥有的那些页面）。例如：

• domain/org/profile1
• domain/org/profile2
• domain/org/profile3

有没有办法通过自定义vue.config.js来实现这个功能？

下面是当前尝试过的vue.config.js代码：

module.exports = {
  pages: {
    index: {
      entry: "./src/pages/home/main.js",
      template: "public/index.html",
      title: "Home",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    legal: {
      entry: "./src/pages/legal/main.js",
      template: "public/index.html",
      title: "Legal",
      chunks: ["chunk-vendors", "chunk-common", "legal"],
    },
    submit: {
      entry: "./src/pages/submit/main.js",
      template: "public/index.html",
      title: "Submit",
      chunks: ["chunk-vendors", "chunk-common", "submit"],
    },
    org: {
      digitalocean: {
        entry: "./src/pages/org/digitalocean/main.js",
        template: "public/index.html",
        title: "Digital Ocean",
        chunks: ["chunk-vendors", "chunk-common", "digitalocean"],
      },
    },
  },
};

文件结构如下：

src
-assets
-components
-pages
--home
    App.vue
    main.js
--legal
    App.vue
    main.js
--submit
    App.vue
    main.js
--org
---digitalocean
     App.vue
     main.js

这给我带来了一个错误：

Invalid options in vue.config.js: child "pages" fails because [child "org" fails because ["org" must be a string, "org" must be an array, child "entry" fails because ["entry" is required]]]

非常期待关于如何通过修改vue.config.js来使嵌套页面起作用的指针！

- Pat

---

你不想使用vue-router吗？ - Himanshu Pant

@HimanshuPant 感谢您的参与！如果我不需要使用vue-router，我想通过只使用vue.config.js来简化它。您是否有任何实现该目标的方法？ - Pat

文档说明了任何其他属性都会传递给html-webpack-plugin。请尝试以下代码：module.exports = { pages: { index: { entry: "./src/pages/home/main.js", template: "public/index.html", title: "Home", chunks: ["chunk-vendors", "chunk-common", "index"], pages: { digitalocean: { entry: "./src/pages/org/digitalocean/main.js", template: "public/index.html", title: "Digital Ocean", chunks: ["chunk-vendors", "chunk-common", "digitalocean"], }, } } }, }; - Himanshu Pant

感谢您的建议：实施您的建议时出现了错误：vue.config.js中的无效选项：子级“pages”失败，因为[子级“pages”失败，因为[“pages”必须是字符串，“pages”必须是数组，子级“entry”失败，因为[“entry”是必需的]]]。 - Pat

欢迎提供其他指针 @HimanshuPant :) - Pat

Answer 1

我已经通过以下代码仅使用vue.config.js解决了这个问题。注意：强大的小东西vue.config.js：

├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── pages
│       ├── home
│       │   ├── App.vue
│       │   ├── cache.js
│       │   └── main.js
│       ├── legal
│       │   ├── App.vue
│       │   └── main.js
│       ├── org
│       │   ├── digitalocean
│       │   │   ├── App.vue
│       │   │   └── main.js
│       │   └── intercom
│       └── submit
│           ├── App.vue
│           └── main.js
└── vue.config.js

还有 vue.config.js 文件：

module.exports = {
  pages: {
    index: {
      entry: "./src/pages/home/main.js",
      template: "public/index.html",
      filename: "index.html",
      title: "Home",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    legal: {
      entry: "./src/pages/legal/main.js",
      template: "public/index.html",
      filename: "legal.html",
      title: "Legal",
      chunks: ["chunk-vendors", "chunk-common", "legal"],
    },
    submit: {
      entry: "./src/pages/submit/main.js",
      template: "public/index.html",
      filename: "submit.html",
      title: "Submit",
      chunks: ["chunk-vendors", "chunk-common", "submit"],
    },
    "org/digitalocean": {
      entry: "./src/pages/org/digitalocean/main.js",
      template: "public/index.html",
      filename: "org/digitalocean.html",
      title: "Digital Ocean",
      chunks: ["chunk-vendors", "chunk-common", "org/digitalocean"],
    },
  },
};

- Pat

---

当您提供页面时，如何找到页面的URL？ - Oleg Abrazhaev

仍然无法在Webpack DevServer中工作。 - m4heshd