How to split files in a spa built with Vue.js into public and private parts?

Issue

I want to split an SPA app I’m building with Vue.js and Ionic into a public part (with login, request password and little else) and the rest…

I’ve discovered it is possible to create a Multi-Page Application with webpack and using HtmlWebpackPlugin but it is not clear for me how to use it…

Any examples you know of?

Thanks in advance

Solution

This is the first part of the implementation…
You need a javascript entry file for each part plus a separate router file…
Then in the vue.config.js you can add…

module.exports = {
  pages: {
    publicSide: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Public Page'
    },
    privateSide: {
      entry: 'src/private.ts',
      template: 'private/index.html',
      filename: 'private.html',
      title: 'Private Page'
    }
  }
}

I still have to figure out how to generate 2 output folders instead of one…

Answered By – Esteban

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0