How to create multiple vue apps in same folder

Question

I am working on a project which has different vuejs app instances like.

main-project
    > app1
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
    > app2
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
    > app3
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
        .
        .
        .
        .

I have created these app using vue-cli : vue init webpack app1 , vue init webpack app2 and so on. When I build these apps using webpack I got following files

main-project
    > dist
        > assets
            > app1
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
            > app2
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
            > app3
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
        -- app1.html
        -- app2.html
        -- app3.html
        .
        .
        .
        .

There are 3 (or more apps..) have different components eg. Let us say app2 is only for mobile and it has all components different in such a way that these are not used (can't be used) in other apps. So now as long as the no of app is less in number this approach seems ok. But when no of apps grow in size this will create same file multiple type like package.json node_modules and so on And this will result in increase in the project file size unnecessary.

Now my question is how to organize this in such a way that I can use same package.json and node_modules (same files across different apps) from a single folder like:

main-project
    > apps
        > src
        > build
        -- package.json
        -- main1.js
        -- App1.vue
        -- main2.js
        -- App2.vue
        -- main3.js
        -- App3.vue
        .
        .
        .
        .

and after build these for production

main-project
    > dist
        > assets
            > app1
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
            > app2
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
            > app3
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
        -- app1.html
        -- app2.html
        -- app3.html
        .
        .
        .
        .

Answer 1

If we are using webpack template for generating boilerplate for our project in vue-cli we can do this in the simple way:

Just add the following code in the plugin section in webpack.prod.conf.js file :

new HtmlWebpackPlugin({
      filename: 'app1.html',
      template: 'app1_template.html',
      inject: true,
      chunks: ['app1', "vendor", "manifest"],
      chunksSortMode: 'dependency'
    }),
new HtmlWebpackPlugin({
      filename: 'app2.html',
      template: 'app2_template.html',
      inject: true,
      chunks: ['app2', "vendor", "manifest"],
      chunksSortMode: 'dependency'
    }),

and so....on