1. vite 설치
$ npm install -D vite
devDependencies에 넣기
2. 불필요한 의존성 삭제
- babel 관련 패키지
- vue-cli 관련 패키지
- @vue/cli-plugin-babel
- @vue/cli-plugin-eslint
- @vue/cli-plugin-router
- @vue/cli-plugin-vuex
- @vue/cli-service
- sass-loader (sass만 있으면 된다)
3. package.json에 스크립트 수정
...
"scripts": {
"serve": "vite",
"build:dev": "vite build --mode dev",
"build:stage": "vite build --mode stage",
"build": "vite build",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
...4. 프로젝트 루트에 config 파일 추가
jsconfig.json or tsconfig.json
// jsconfig.json
{
"vueCompilerOptions": {
"target": 2.7
}
}// tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"preact/*": ["./stub/empty.d.ts"]
},
"noImplicitAny": false,
"types": [
"pinia-plugin-persist"
]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }],
}
vite.config (.js or .ts)
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import path from 'path';
export default (async () => {
try {
// vite.config.local.js 파일이 존재하면 해당 파일에 설정된 config 설정을 d 사용
const localViteConfig = await import('./vite.config.local');
return localViteConfig.default;
} catch (err) {
return defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
});
}
})();5. 각종 config.js 파일을 모두 cjs로 바꿔주기
- package.json에 설정된 type이 module이면 cjs로 해야된다.
6. index 파일 위치 변경
vue-cli는 public 폴더 내에 favicon과 같이 있다. vite는 루트 디렉토리에 넣어야 한다. 그리고 아래 스크립트를 추가해야 한다.
<script type="module" src="/src/main.js"></script>
<!-- index.html -->
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>...</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
References
'웹 개발 > Vue.js' 카테고리의 다른 글
| Vue.js) Nuxt.js 란 무엇인가 (0) | 2023.02.21 |
|---|---|
| Vue.js) vue-router parameter로 객체 전달하기 (0) | 2022.12.14 |
| Vue.js) vue-router 이동시 새탭으로 열기 (0) | 2022.12.14 |