如何在同一文件夹中创建多个vue应用程序

Question

我正在开发一个具有不同vuejs app实例的项目.

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

我创建了使用这些应用程序vue-cli:vue init webpack app1,vue init webpack app2等等.当我使用webpack以下文件构建这些应用程序时

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

有3个(或更多应用程序..)具有不同的组件,例如.让我们说app2仅适用于移动设备,并且它具有不同的所有组件,以至于在其他应用程序中不使用这些组件(不能使用). 所以现在只要应用程序的数量少于数量,这种方法似乎没问题.但是当没有大小的应用程序增长时,这将创建相同的文件多个类型,如package.json node_modules等等,这将导致不必要的项目文件大小的增加.

现在我的问题是如何以这样的方式组织它,我可以从单个文件夹使用相同的package.json和node_modules(不同应用程序中的相同文件),如:

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

并在构建这些用于生产之后

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

如果我们使用webpack模板为我们的项目生成样板文件，vue-cli我们可以通过简单的方式做到这一点：

只需在文件的插件部分添加以下代码webpack.prod.conf.js：

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

等等