backend & frontend 연동
//작업 디렉토리 생성
mkdir 폴더이름
//frontend 디렉토리 생성
npm install -g @vue/cli
vue create frontend
cd frontend
npm run serve
>>localhost:8080
확인
//backend 디렉토리 생성
작업디렉토리 폴더이름에서
NO FRONTEND DIRECTORY!
npm install -g express-generator
express --view=pug backend
cd backend
npm install
npm start
>>localhost:3000
>>express 실행된 것 확인
* Frontend -vue.config.js
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
// /api 요청이 있을 때 해당 요청을 backend 쪽의 /api로 돌려주는 proxy 설정을 추가
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
//frontend 프로젝트를 build했을 때 output이 ../backend/public에 위치
outputDir: '../backend/public',
});
frontend
>>npm build
>>backend express 서버 실행
>>npm start
localhost:3000 접속
출처 : https://vlee.kr/4155
vue.js - express로 frontend, backend 연동하기 예제 - Vlee's Tale
작업 디렉토리 생성 $ mkdir example 프론트엔드와 백엔드 작업을 하게 될 작업디렉토리를 생성한다. Frontend 작업디렉토리 생성 및 front 서버 실행 $ npm install -g yarn $ npm install -g @vue/cli $ vue create fronten
vlee.kr
