vue.config.js

카테고리 없음

vue.config.js

이채야채 2025. 2. 13. 11:22

vue.config.js는 vue내부에서 언제 실행되나요?

vue-cli-service가 실행될 때 초기 단계에서 로드됩니다.
vue-cli-service serve (개발 서버 실행) 또는 vue-cli-service build (빌드 실행) 시 vue.config.js를 읽어 Webpack 및 기타 툴의 설정을 동적으로 변경합니다.
vue.config.js는 Vue 프레임워크의 런타임이 아니라 빌드 타임에서 실행되며, Webpack을 포함한 빌드 프로세스의 일부로 동작합니다.

vue-cli-service란 무엇인가요

vue-cli-service는 Vue CLI(@vue/cli)에 의해 설치되는 패키지로, Vue 프로젝트를 실행, 빌드, 테스트, 배포하는 데 사용됩니다.
Vue 프레임워크 자체(vue 패키지)에는 포함되지 않으며, Vue 프로젝트를 편리하게 관리하기 위한 빌드 도구입니다.
Webpack, Babel, ESLint 등의 빌드 관련 툴을 자동으로 설정하고, 필요에 따라 사용자 정의 설정을 반영할 수 있습니다.

결론:

vue-cli-service는 Vue 프레임워크 내부에 존재하는 것이 아니라, Vue CLI(@vue/cli)의 일부로 제공되는 독립적인 빌드 및 개발 도구입니다.
Vue 프로젝트를 실행, 빌드, 테스트하기 위해 사용되며, vue.config.js를 통해 Webpack 설정을 조정할 수 있습니다.
Vue 프레임워크(vue 패키지)와는 별개이며, Vue의 UI 렌더링이나 반응형 시스템을 담당하는 것이 아니라, Vue 프로젝트의 개발 및 빌드 환경을 관리하는 역할을 합니다.

vue.config.js의 샘플을 통해서 설정을 알아봅시다.

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const API_IP = "10.30.200.15";
const API_PORT = "8090";

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        plugins: [new NodePolyfillPlugin()],
    },
    chainWebpack: (config) => {
        config.plugin("html").tap((args) => {
            args[0].title = "Laon Sentinel";
            return args;
        });
    },
    devServer: {
        proxy: {
            "/api": {
                target: `http://${API_IP}:${API_PORT}/api/test`,
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "",
                },
            },
            "/prod": {
                target: "http://10.30.8.12:10000/api/v1/sentinel",
                changeOrigin: true,
                pathRewrite: {
                    "^/prod": "",
                },
            },
        },
    },
    css: {
        loaderOptions: {
            sass: {
                additionalData: `@import "@/assets/scss/abstracts/variable";`,
            },
        },
    },
});

1. 기본 설정 및 플러그인

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

defineConfig : Vue CLI 4.5 이상에서 defineConfig를 사용하면 자동 완성 및 타입 지원이 향상됩니다.
NodePolyfillPlugin : Node.js의 일부 내장 모듈(fs, path, crypto 등)을 브라우저에서 사용할 수 있도록 Webpack에 폴리필(polyfill)을 추가하는 플러그인입니다. 이를 통해 브라우저 환경에서도 일부 Node.js API를 사용할 수 있습니다.

2. API 서버 IP 및 포트 정의

const API_IP = "10.30.200.15";
const API_PORT = "8090";

API 서버의 기본 IP와 포트를 정의하는 상수입니다.
이후 devServer.proxy에서 이 값을 사용하여 API 요청을 프록시할 때 활용됩니다

3. module.exports 내 설정

module.exports = defineConfig({

defineConfig를 사용하여 Vue CLI 서비스의 설정을 정의합니다.

defineConfig를 사용하여 Vue CLI 서비스의 설정을 정의합니다.

4. transpileDependencies: true

transpileDependencies: true,

Babel이 node_modules 안의 일부 패키지를 트랜스파일하도록 설정하는 옵션입니다.
보통 ES6+로 작성된 외부 라이브러리가 IE11 같은 구형 브라우저에서 실행되지 않을 경우, 이 옵션을 사용하여 트랜스파일할 수 있습니다.

5. configureWebpack 설정

configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
},

Webpack 설정을 직접 수정하는 옵션입니다.
NodePolyfillPlugin 플러그인을 추가하여 브라우저 환경에서도 일부 Node.js 모듈을 사용할 수 있도록 설정합니다.

6. chainWebpack 설정 (HTML 타이틀 변경)

chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
        args[0].title = "Laon Sentinel";
        return args;
    });
},

chainWebpack은 Webpack의 설정을 체인 형태로 수정할 수 있도록 합니다.
여기서는 Vue 프로젝트에서 index.html을 생성하는 HTMLWebpackPlugin의 설정을 수정하여, 브라우저 탭에 표시될 기본 타이틀(title) 을 "Laon Sentinel"로 변경합니다.

7. devServer 설정 (API 프록시)

devServer: {
    proxy: {
        "/api": {
            target: `http://${API_IP}:${API_PORT}/api/test`,
            changeOrigin: true,
            pathRewrite: {
                "^/api": "",
            },
        },
        "/prod": {
            target: "http://10.30.8.12:10000/api/v1/sentinel",
            changeOrigin: true,
            pathRewrite: {
                "^/prod": "",
            },
        },
    },
},

개발 서버(vue-cli-service serve) 실행 시 프록시(proxy) 설정을 적용하여, 특정 경로(/api, /prod)로 요청을 보낼 때 API 서버로 리다이렉트합니다.
proxy 설정의 각 속성 설명:
- "/api" : API 요청을 로컬 개발 서버(localhost:8080)가 아니라 실제 API 서버 (http://${API_IP}:${API_PORT}/api/test)로 보냄.
- target : 요청을 보낼 실제 API 서버의 주소.
- changeOrigin: true : 브라우저에서 요청할 때 CORS 문제를 방지하기 위해 origin을 변경함.
- pathRewrite : 프록시 요청 시 경로 변경 (/api를 빈 문자열로 변환하여 실제 API 요청에서 /api를 제거).
예제:
- 클라이언트에서 http://localhost:8080/api/users 요청 → http://10.30.200.15:8090/api/test/users로 변환되어 전송됨.
- /prod도 같은 방식으로 http://10.30.8.12:10000/api/v1/sentinel로 라우팅됨.

이 설정을 통해:

개발 환경에서 API 요청이 자동으로 서버로 프록시되고,
프로젝트의 index.html 타이틀이 "Laon Sentinel"로 설정되며,
SCSS 전역 변수를 추가하는 등의 편리한 기능을 활용할 수 있습니다.