vite + react + typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import mkcert from 'vite-plugin-mkcert'; // localhost를 https로
import path from 'path';
export default defineConfig({
plugins: [react(), mkcert()],
server: {
host: '0.0.0.0',
https: true,
proxy: {
'/api': { // /api로 axios 접근 시 <https://www/abcde로> 연결
target: `https://www.abcde`,
changeOrigin: true,
secure: false,
rewrite: path => path.replace(/^\\/api/, '')
}
}
},
resolve: {
alias: { // 간편하게 호출하기
'@components': '/src/components',
'@constants': '/src/constants',
'@pages': '/src/pages',
'@utils': '/src/utils'
}
}
});
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"baseUrl": "src", // baseurl 설정
"paths": { // 별명 설정
"@components": ["components/index"], // /*보다 먼저 써야함
"@components/*": ["components/*"],
"@constants": ["constants/index"],
"@constants/*": ["constants/*"],
"@pages": ["pages/index"],
"@pages/*": ["pages/*"],
"@utils": ["utils/index"],
"@utils/*": ["utils/*"]
},
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}