[2023-06-07] Quasar dotenv 로 multi profile 구축하기

 안녕하세요. 클스 입니다.

프로젝트를 하다보면 local, dev, test, staging, production 등 다양한 환경으로 API 주소등 환경을 다르게 가져가야 할 때가 있습니다.

이때 필요한 것이 env 파일을 이용해야 합니다.

Quasar 는 process.env 를 기본으로 제공합니다. quasar.config.js에 환경 변수를 넣어주면

process.env.변수 이렇게 사용하면 됩니다.

https://quasar.dev/quasar-cli-webpack/handling-process-env/

그러나 별도 파일로 구성하면 유지관리가 직관적이고 편리하기 때문에 dotenv 패키지를 많이 사용합니다.

1) dotenv 설치하기

$ yarn add dotenv

$ .env 폴더 생성 ==> project root에 생성합니다.

2) .env.local 파일 생성 후 아래 추가

APP_TITLE=':Admin'

APP_MODE='local-로컬'

APP_VERSION='0.6.5'

API_URL=http://localhost:8001

3) quasar.config.js 에 아래 추가

/* eslint-env node */

/*

* This file runs in a Node context (it's NOT transpiled by Babel), so use only

* the ES6 features that are supported by your Node version. https://node.green/

*/

// Configuration for your app

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const { configure } = require('quasar/wrappers');

const path = require('path');

const DotEnv = require('dotenv'); ==> 여기 추가

그리고 build 섹션에 아래와 같이 추가합니다.

build: {

env: DotEnv.config({ path: `./.env/.env.${process.env.ENVIRONMENT}` }).parsed,

}

4) App.vue 등 vue 파일에서 사용하기

<template>

<router-view />

</template>

<script lang="ts">

import { defineComponent, defineAsyncComponent } from 'vue';

export default defineComponent({

name: 'App',

components: {

// TODO:

},

setup() {

return {

//TODO:do something

};

},

mounted() {

// console.log('App Info:', process.env);

console.log('App Info:', process.env.APP_TITLE, '-', process.env.APP_MODE);

},

watch: {

$route: {

immediate: true,

handler(to) {

document.title = to.meta.title ? to.meta.title + ' ::: KELU' : 'KELU' + '::' + process.env.APP_MODE;

},

},

},

});

</script>

여기서는 route 정보를 이용해서 app title을 변경하였습니다.

5) 실행하기

파일명이 .env.local 이므로 local를 환경변수로 받습니다.

실행할때 ENVIRONMENT 를 환경변수로 넣어주어 실행합니다.

$ ENVIRONMENT=local quasar dev .d88888b. d88P" "Y88b 888 888 888 888 888 888 8888b. .d8888b 8888b. 888d888 888 888 888 888 "88b 88K "88b 888P" 888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888 Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888 "Y888888" "Y88888 "Y888888 88888P' "Y888888 888 Y8b

ENVIRONMENT 를 적절하게 변경하면 본인에게 맞는 환경을 쉽게 구축할 수 있습니다.

이상 클스 였습니다.