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

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 个（或更多应用程序..）具有不同的组件，例如。 假设 app2 仅适用于移动设备，它的所有组件都不同，因此在其他应用程序中不使用（不能使用）这些组件。 所以现在只要应用程序的数量较少，这种方法似乎就可以了。但是当没有应用程序的大小增加时，这将创建相同的文件多种类型，如 package.json node_modules 等等这将导致不必要的项目文件大小增加。

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

并在为生产构建这些之后

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 示例

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

Answer 2

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

只需在 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 应用程序

How to create multiple vue apps in same folder

webpack

vuejs2

vue-cli