Kang-ji

서버 엔드포인트 API 주소를 환경변수로 관리하는 방법

프로젝트 Root돌더 위치에 .env 파일 생성. 키 = 값 의 형태로 작성한다. (환경변수 파일)

.env

API_URL = http://localhost:3000/

기존 axios API 파일 

설정한 .env환경변수 파일을 api/ index.js에서 가져오는 방법

vue-cli 2.X 까지는 .env팡리을 애플리케이션 소스코드에서 들고올려면 웹펙의 DefinePugin을 사용해줘야했다. 
vue-cli 3.X 부턴 사용자 편리를 위해 자체로 규칙을 제공하는데 
VUE_APP_ 접두가사 붙은 변수는 자동 로드된다.

.env환경변수의 파일은 자동으로  axois api/index.js에서 들고올 수 있게 된다.

index.js 에서 .env 파일내 소스 사용하기

// api/index.js

// url 공통화
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
});

// .env
VUE_APP_API_URL = http://localhost:3000/

https://webpack.js.org/plugins/define-plugin/

Vue CLI 2.x 버전 vs Vue CLI 3.x 버전 이상

Vue Cli 설치 명령어

CLI 2.X

• webpack , webpack-simple, browserify, browserify-simple, simple 

npm install -g vue/cli

CLI 3.X

npm install -g @vue/cli

vue 프로젝트 생성

CLI 2.X

vue init [project_template_name] [project directory path]

CLI 3.X

vue create [project_name]

웹팩 설정파일

CLI 2.X

노출 O
show explicit, ex) webpack.config.js

CLI 3.X

노출 X
no show

라이브러리 추가

CLI 2.X

github 템플릿 다운로드

CLI 3.X

plugin 기반으로 기능 추가

실행화면

CLI 2.X

CLI 3.X

Vue Cli 3.X 이상 일때 기준으로 Setting

1. SASS (scss)

• node-sass, sass-loader 설치

npm install --save-dev node-sass sass-loader

• vue.config.js 세팅 (모든 컴포넌트에 공통 스타일적용)
  • sass-loader 버전 8.X는 data가 아니고 prependData를 써줘야 한다.
  • 그 이상의 버전은 additionalData

// vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/scss/_reset.scss";
                    @import "@/assets/scss/_variables.scss";
                    @import "@/assets/scss/_breakpoints.scss";
                    @import "@/assets/scss/_mixins.scss";
                `
            }
        }
    }
};

2. Polyfill 

Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요

• @babel/polyfill, @babel/preset-env 설치 

npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

• main.js (※ 최상단에 위치할 것)

//main.js

import '@babel/polyfill'
import Vue from 'vue'

• vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기

//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

• babel.config.js

// babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env']
	]
}

3. vuex

• 설치
  • 이전 버전으로 설치 했을 경우 npm uninstall --save vuex 로 이전버전 삭제 후 설치

 npm install --save vuex@next

• main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js';

const app = createApp(App);

app.use(store);
app.mount('#app');

• store폴더, index.js 파일 생성

// store/index.js

import { createStore } from 'vuex';

export default createStore({
  state: {
  },
  getters: {
    
  },
  mutations: {
  
  }
});

4. Router

• 설치

npm i vue-router@next

• main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js';

const app = createApp(App);

app.use(router);
app.mount('#app');

import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: "/",
  },
 
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;