时间戳

首页 > 解决方案 > 配置VueJS页面（vue.config.js中的多个页面）MPA

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

问题描述

我正在制作MPA，使用管理端和客户端。

我需要配置 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”是干什么用的？我只从官方文档中复制它。

标签： javascriptvue.jsvuejs2vue-routermulti-page-application

解决方案

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

我遇到了同样的问题，常规应用程序没有在根目录下提供服务，并且在文档中找不到任何内容。当我将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']
    }
  }
}

推荐阅读