동일한 폴더에 여러 vue 앱을 생성하는 방법

동일한 폴더에 여러 vue 앱을 생성하는 방법

저는 다음과 같은 다양한 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는 모바일 전용으로 컴포넌트가 모두 다르기 때문에 다른 앱에서는 사용할 수 없습니다.따라서 현재 앱의 수가 적으면 이 접근 방식은 괜찮은 것 같습니다.그러나 크기가 커지는 앱이 없을 경우 패키지와 같은 여러 유형의 동일한 파일이 생성됩니다.json node_modules 등 프로젝트 파일 크기를 늘릴 필요가 없습니다.

이제 어떻게 하면 같은 패키지를 사용할 수 있도록 정리할 수 있을까?다음과 같은 단일 폴더에서 json 및 node_module(다른 앱에 있는 동일한 파일)을 사용할 수 있습니다.

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

사용하고 있는 경우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'
    }),

기타 등등

웹 팩은 여러 개의 항목 파일을 지정할 수 있으므로 하나의 패키지로 프로젝트 구조를 유지할 수 있습니다.루트 레벨의 json과 Webpack은 각각의 독립된 파일을 1개의 파일로 빌드할 수 있습니다.

웹 팩 예시

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

Vue CLI 페이지를 사용했습니다.

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

언급URL : https://stackoverflow.com/questions/46725841/how-to-create-multiple-vue-apps-in-same-folder