[Vue-cli] 다중 페이지 (Vue Multi-Instance)

다중 Vue Instance로 여러 페이지 생성 시에는 vue.config.js에서 각 Path별 entry 경로를 설정하여 사용합니다.

module.exports = {
    pages: {
        index: {
            entry: 'src/main.ts',
            template: 'public/index.html',
            filename: 'index.html',
        },
        separate: {
            entry: 'src/pages/separate-page/main-separate-page.ts',
            template: 'public/separate/index.html',
            filename: 'separate/index.html',
        },
    },
}

 

여기서 Production 빌드로 배포 시에 각 인스턴스에 쓰인 css파일이 하나의 chunk파일에 묶여 UI가 틀어지는 현상이 발생될 경우 각 페이지별(Vue Instance별) chunk-vendor 파일을 분리해야합니다.

module.exports = {
    pages: {
        index: {
            entry: 'src/main.ts',
            template: 'public/index.html',
            filename: 'index.html',
            chunks: ['chunk-common', 'chunk-index-vendors', 'index'],
        },
        separate: {
            entry: 'src/pages/separate-page/main-separate-page.ts',
            template: 'public/separate/index.html',
            filename: 'separate/index.html',
            chunks: ['chunk-common', 'chunk-separate-vendors', 'separate'],
        },
    },
    
    chainWebpack: (config) => {
        const options = module.exports;
        const pages = options.pages;
        const pageKeys = Object.keys(pages);

        // Long-term caching

        const IS_VENDOR = /[\\/]node_modules[\\/]/;

        config.optimization.splitChunks({
            cacheGroups: {
                ...pageKeys.map((key) => ({
                    name: `chunk-${key}-vendors`,
                    priority: -11,
                    chunks: (chunk) => chunk.name === key,
                    test: IS_VENDOR,
                    enforce: true,
                })),
                common: {
                    name: 'chunk-common',
                    priority: -20,
                    chunks: 'initial',
                    minChunks: 2,
                    reuseExistingChunk: true,
                    enforce: true,
                },
            },
        });
    },
}

 

 

 

참고사이트
https://stackoverflow.com/questions/51242317/how-to-split-vue-cli-3-pages-vendor-file