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
        .
        .
        .
        .

Rakesh Soni · Accepted Answer · 2017-10-20 10:40:34Z

4

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

answered Oct 20, 2017 at 10:40

Rakesh Soni

1,3432 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim Hutchison · Accepted Answer · 2017-10-13 15:46:49Z

Webpack can specify multiple entry files so you should be able to keep your project structure with one package.json at the root level and Webpack can build each independent file into one file.

Example Webpack

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
require('babel-loader');

module.exports = {
    entry: {
        App1: './App1/main.js',
        App2: './App2/main.js'
},
    module: {
        rules: [{
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules|vue\/src/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true,
                    loaders: {
                        'js': 'babel-loader'
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js"],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist'])
        , new CopyWebpackPlugin([
            { from: './App1/*.css' },
            { from: './App1/*.html' },
            { from: './App2/*.css' },
            { from: './App2/*.html' },
        ])
    ],
    output: {
        filename: './Apps/[name]/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    node: {
        fs: 'empty'
    }
}

It somehow solves the problems but it's not as per the webpack template. I did little re-search and found simple solution: =>> github.com/jantimon/html-webpack-plugin/issues/…

Merlin · Accepted Answer · 2021-04-15 09:09:26Z

3

I used the Vue Cli Pages.

//vue.config.js
module.exports = {
  pages: {
    app1: {
      entry: 'src/app1/main.js',
      template: 'public/index.html',
      filename: 'App1.html',
      title: 'App number one',
      chunks: ['chunk-vendors', 'rather-than-package-json', 'index'],
    },
    app2: {
      entry: 'src/app2/main.js',
      template: 'public/index.html',
      filename: 'App2.html',
      title: 'App number tow',
      chunks: ['chunk-vendors', 'any-other-chunk', 'index'],
    },
    //...
  },
  //...
}

answered Apr 15, 2021 at 9:09

Merlin

996 bronze badges

1 Comment

Esteban Over a year ago

Is there any way to export to different directories with pages? Such as dist/app1 and dist/app2 in your case...

Collectives™ on Stack Overflow

How to create multiple vue apps in same folder

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related