如何通过修改 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!

使嵌套页面正常工作的指点

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"],
    },
  },
};

如何通过修改 vue.config.js 创建多页 Vue.js 应用程序，其中页面位于嵌套子目录上？

How to create a multipage Vue.js application with pages on nested subdirectories by modifying vue.config.js?

multipage

vue.js

vue-cli

multi-page-application

vue-cli-3