如何在同一個文件夾中創建多個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

如果我們使用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 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' 
    } 
}