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

Posted 2023-02-23

【中文标题】如何在同一个文件夹中创建多个 vue 应用

【英文标题】：How to create multiple vue apps in same folder

【发布时间】：2018-03-25 08:23:17

【问题描述】：

我正在开发一个具有不同 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
        .
        .
        .
        .

【参考方案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'
    ),

等等....在

【参考方案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'
    

【讨论】：

它以某种方式解决了问题，但它不是按照webpack 模板。我几乎没有重新搜索并找到简单的解决方案：=>> github.com/jantimon/html-webpack-plugin/issues/…

【参考方案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'],
    ,
    //...
  ,
  //...