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

Question

I'm making a MPA , using an admin side and a client side.

I need to configure the vue.config.js to do that. I found in the documentation that I need to make an object of every page. ( https://cli.vuejs.org/config/#pages ) These are the mines:

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']
    },
  },
}

The problem of that configuration is that Vue takes the "index" as a subpage .

I want to access the pages at: localhost:8080/. But it only loads client/main.js accessing to localhost:8080/index/

How should I configure the vue.config.js to use one main.js for localhost:8080/ and a diferent one for localhost:8080/admin/

What is the "title" and "chucks" for? I only copy it from the official docs.

Answer 1

Thanks! I fixed it. But now my problem is different. I can´t access to the sites of the root localhost:8080/. It need to use the path localhost:8080/index

I had the same issue with the regular app not being served at the root and couldn't find anything in the docs. When I renamed the index page key to some other name though ( client in the case below), the main app was available at the root: 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']
    }
  }
}