如何通过修改 vue.config.js 创建多页 Vue.js 应用程序，其中包含嵌套子目录上的页面? [英] How to create a multipage Vue.js application with pages on nested subdirectories by modifying vue.config.js?

问题描述

我有一个多页 Vue.js 应用程序，其中包含域/法律上的工作页面；域/提交；等等.我在 Vue.js' pages 的帮助下实现了它(即自定义vue.config.js)

I have a multipage Vue.js application with working pages on domain/legal; domain/submit; etc. I've implemented that with the help of Vue.js' pages (i.e. customizing vue.config.js)

换句话说，我很好地完成了上述工作.

In other words, I'm all good making the above work.

我现在正在尝试在新的子目录级别下实现更多的嵌套页面(除了上面我已经拥有的页面).即

I'm now trying to implement further nested pages under a new subdirectory level (additionally to the ones I already have as per above). i.e.

• 域/org/profile1
• 域/org/profile2
• 域/org/profile3

有什么办法可以通过自定义 vue.config.js 来完成这项工作?

Any way to make this work by customizing 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 使嵌套页面工作的指针将非常受欢迎！

Pointers will be extremely welcome on how to make the nested pages work by modifying vue.config.js!

推荐答案

我只用 vue.config.js 就解决了这个问题，如下所示.注意:vue.config.js 的强大小东西是:

I’ve managed to solve this with only vue.config.js with the below. Note: powerful little thing vue.config.js is:

├── 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 应用程序，其中包含嵌套子目录上的页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！