So erstellen Sie mehrere Vue-Anwendungen im selben Ordner

Question

Ich arbeite an einem Projekt, das verschiedene Vuejs-App-Instanzen wie hat.

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

ich geschaffen habe diese App vue-cli: vue init webpack app1, vue init webpack app2 und so weiter. Wenn ich diese Apps mit webpack bauen bekam folgende ich Dateien

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

Es gibt 3 (oder mehr Anwendungen ..) unterschiedliche Komponenten zB. Nehmen wir an, App2 ist nur für Mobilgeräte und es hat alle Komponenten so unterschiedlich, dass diese in anderen Apps nicht verwendet werden (nicht nutzbar sind). Also jetzt, solange das Nein der App weniger in der Zahl ist, scheint dieser Ansatz in Ordnung. Aber wenn keine der Apps in der Größe wächst, wird dies die gleiche Datei mehrere Typen wie package.json node_modules und so weiter erstellen. Und dies wird dazu führen, dass die Größe der Projektdatei unnötig.

Nun meine Frage ist, wie diese so zu organisieren, dass ich gleichen package.json und node_modules (gleiche Dateien über verschiedene Anwendungen) aus einem einzelnen Ordner wie verwenden kann:

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

und nach dem Bauprozess dieser für die Produktion

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

Wenn wir webpack Vorlage verwenden Textvorschlag für unser Projekt in vue-cli zur Erzeugung können wir in dem einfachen Weg, dies zu tun:

einfach den folgenden Code in dem Abschnitt Plugin hinzufügen in webpack.prod.conf.js Datei:

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

und so .... auf

Answer 2

Webpack können mehrere Eingabedateien angeben, so dass Sie sollten in der Lage zu halten, Ihre Projektstruktur mit einer package.json auf der Stammebene und Webpack kann jede unabhängige Datei in einer Datei erstellen.

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