如何在同一个文件夹中创建多个 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 等等 而这会导致项目文件大小不必要的增加。

现在我的问题是如何以我可以使用的方式组织它 相同的 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

如果我们在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 2

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 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'],
    },
    //...
  },
  //...
}