web-dev-qa-db-fra.com

Comment créer plusieurs applications vue dans le même dossier

Je travaille sur un projet qui a différentes instances d'application vuejs comme.

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

J'ai créé ces applications à l'aide de vue-cli: vue init webpack app1, vue init webpack app2 etc. Lorsque je crée ces applications à l'aide de webpack j'ai les fichiers suivants

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

Il y a 3 (ou plus d'applications ..) ont différents composants, par exemple. Disons que app2 est uniquement pour mobile et qu'il a tous les composants différents de telle manière qu'ils ne sont pas utilisés (ne peuvent pas être utilisés) dans d'autres applications. Alors maintenant aussi longtemps que le no de l'application est moins nombreux cette approche semble correcte. Mais lorsqu'aucune des applications n'augmente en taille, cela créera le même type de fichier multiple comme package.json node_modules et ainsi de suite. Cela entraînera une augmentation inutile de la taille du fichier de projet.

Maintenant, ma question est de savoir comment organiser cela de telle manière que je puisse utiliser les mêmes package.json et node_modules (mêmes fichiers sur différentes applications) à partir d'un dossier unique comme:

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

et après les avoir construits pour la production

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
        .
        .
        .
        .
webpackvuejs2vue-cli
12
Rakesh Soni

Si nous utilisons le modèle webpack pour générer un passe-partout pour notre projet dans vue-cli nous pouvons le faire de la manière la plus simple:

Ajoutez simplement le code suivant dans la section plugin dans webpack.prod.conf.js fichier :

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

etc

3
Rakesh Soni

Webpack peut spécifier plusieurs fichiers d'entrée, vous devriez donc être en mesure de conserver la structure de votre projet avec un package.json au niveau racine et Webpack peut créer chaque fichier indépendant en un seul fichier.

Exemple de 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'
    }
}
3
Tim Hutchison