配置VueJS页面（vue.config.js中的多个页面）MPA答案

【问题标题】：Configure VueJS pages (multiple pages in vue.config.js) MPA配置VueJS页面（vue.config.js中的多个页面）MPA
【发布时间】：2020-03-22 09:09:39
【问题描述】：

我正在制作一个 MPA，使用 admin 端和 客户端 端。

我需要配置 vue.config.js 来做到这一点。我在文档中发现我需要为每个页面创建一个对象。 (https://cli.vuejs.org/config/#pages) 这些是地雷：

module.exports = {
  pages: {
    admin: {
      entry: 'src/Admin/main.js',
      template: 'public/admin.html',
      filename: 'admin.html',
      title: 'Admin Page',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    },
    index: {
      entry: 'src/Client/main.js',
      template: 'public/client.html',
      filename: 'client.html',
      title: 'Client Page',
      chunks: ['chunk-vendors', 'chunk-common', 'client']
    },
  },
}

该配置的问题是 Vue 将“索引”作为子页面。

我想访问位于：localhost:8080/ 的页面。但它只加载 client/main.js 访问 localhost:8080/index/

我应该如何配置 vue.config.js 以使用一个 main.js 用于 localhost:8080/ 和一个不同的 localhost:8080/admin/

“title”和“chucks”是干什么用的？我只是从官方文档中复制过来的。

【问题讨论】：

问题是您对两个页面使用相同的filename。不要那样做
谢谢！我修好了它。但现在我的问题不同了。我无法访问根 localhost:8080/ 的站点。它需要使用路径 localhost:8080/index
遇到了同样的问题，但找不到解决方案，所以我只使用了“索引”页面作为站点根目录。

标签： javascript vue.js vuejs2 vue-router multi-page-application

【解决方案1】：

谢谢！我修好了它。但现在我的问题不同了。我无法访问根 localhost:8080/ 的站点。它需要使用路径本地主机：8080/索引

我遇到了同样的问题，常规应用程序没有在根目录下提供服务，并且在文档中找不到任何内容。当我将index 页面键重命名为其他名称时（在下面的例子中为client），主应用程序在根目录下可用：localhost:port/

module.exports = {
  pages: {
    client: {
      entry: 'src/Client/main.js',
      template: 'public/client.html',
      filename: 'client.html',
      title: 'Client Page',
      chunks: ['chunk-vendors', 'chunk-common', 'client']
    },
    admin: {
      entry: 'src/Admin/main.js',
      template: 'public/admin.html',
      filename: 'admin.html',
      title: 'Admin Page',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    }
  }
}

【讨论】：