Configure VueJS pages (multiple pages in vue.config.js) MPA

跟風遠走 提交于 2020-06-27 16:20:25

问题


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.


回答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']
    }
  }
}


来源:https://stackoverflow.com/questions/59059563/configure-vuejs-pages-multiple-pages-in-vue-config-js-mpa

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!