Question

我正在开发一个具有不同vuejs应用实例的项目，例如。

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个（或更多app ..）有不同的组件，例如。 让我们说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可以指定多个条目文件，因此您应该能够在根级别使用一个package.json保留项目结构，并且Webpack可以将每个独立文件构建到一个文件中。

示例Webpack

CONTENT OF request.GET: <QueryDict: {}>

Answer 2

如果我们使用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'
    }),

等......

Answer 3

我使用了 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'],
    },
    //...
  },
  //...
}

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

3 个答案: