Vue CLI에서 Vite로 레거시 프로젝트 마이그레이션

최근 레거시 프로젝트에서 중요하고 위험성이 높은 취약점이 있는 패키지를 줄이기 위한 목표로 스프린트에 티켓이 추가되었습니다. 이 작업에는 Vue CLI를 빌드 도구로 사용하는 Vue 2 프로젝트를 Vite로 마이그레이션하는 작업이 포함됩니다.

이것은 기술 스택을 현대화하고 Vite가 제공하는 성능 이점을 활용할 수 있는 좋은 기회입니다. 이 기사에서는 마이그레이션을 완료하기 위해 수행한 주요 단계를 공유하겠습니다.

---

VITE란 무엇인가요?

Vite("veet"로 발음)는 최신 웹 프로젝트를 위한 더 빠르고 효율적인 개발 환경을 제공하도록 설계된 빌드 도구입니다.

Vite를 사용하면 빌드 시간이 크게 단축되고 개발 서버가 엄청나게 빨라지며 구성 프로세스가 단순화됩니다.

---

마이그레이션 단계

1. package.json 업데이트

첫 번째 단계는 프로젝트에서 모든 Vue CLI 종속성을 제거하는 것입니다. 여기에는 Babel 관련 패키지, babel.config.js 구성 파일 및 core-js 종속성이 포함됩니다.

<code>//package.json
"@vue/cli-plugin-babel": "~5.0.8", //remove
"@vue/cli-plugin-e2e-nightwatch": "~5.0.8", //remove
"@vue/cli-plugin-eslint": "~5.0.8", //remove
"@vue/cli-plugin-unit-jest": "~5.0.8", //remove
"@vue/cli-service": "~5.0.8", //remove

"core-js": "^3.6.4", //remove
"@babel/core": "^7.8.4", //remove
"babel-core": "^7.0.0-bridge.0", //remove
"babel-jest": "^25.1.0", //remove
</code>

ESLint 구성이 "babel-eslint"를 파서로 사용하는 경우 이를 교체해야 합니다.

<code>//package.json
"babel-eslint": "^10.0.3", //remove</code>

ESLint 구성을 .eslintrc에서 최신 eslint.config.mjs 형식으로 마이그레이션하고 ESLint를 버전 8로 업데이트했습니다. 이를 적극 권장합니다.

<code>npm install eslint@8 eslint-plugin-vue@8 --save-dev

npx @eslint/migrate-config .eslintrc.js</code>

이러한 종속성을 정리한 후 Vite와 Vue 통합을 위한 플러그인을 추가했습니다.

<code>npm install vite @vitejs/plugin-vue2 --save-dev</code>

---

2. VITE 설정

다른 많은 라이브러리와 마찬가지로 Vite는 프로젝트 루트 디렉터리에 있는 구성 파일(vite.config.js)을 사용하여 빌드 및 개발 옵션을 정의합니다. 시작하기 쉬운 곳은 다음과 같습니다.

<code>import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue2()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});</code>

---

3. index.html 이동 및 업데이트

Vue CLI에서 index.html 파일은 일반적으로 public 폴더에 있습니다. 그러나 Vite는 그것이 프로젝트의 루트 디렉토리에 있을 것으로 예상합니다. 파일을 루트 디렉터리로 이동하고 필요에 따라 경로 참조를 업데이트합니다.

<code>mv public/index.html index.html</code>

<code><link href="<%= BASE_URL %>favicon.ico" rel="icon"></link>  <link href="/favicon.ico" rel="icon"></link></code>

더 이상 자동 삽입이 되지 않으므로 main.js를 포함하세요.

---

4. 환경 변수 업데이트

Vite는 환경 변수를 다르게 처리합니다. .env 파일을 업데이트하거나 생성하고 노출하려는 모든 변수에 VITE_ 접두사를 추가해야 합니다. 예:

<code>VITE_API_URL=https://api.example.com</code>

<code>// router/index.js
//remove
base: process.env.BASE_URL, 
//add
base: import.meta.env.BASE_URL,</code>

---

5. 업데이트 스크립트

마지막으로 Vue CLI 대신 Vite 바이너리를 사용하도록 package.json의 스크립트를 업데이트했습니다. 지금은 다음과 같습니다.

<code>//from
"scripts": {
  "serve": "vue-cli-service serve --port 8084",
  "dev": "npm run serve",
  "build": "vue-cli-service build",
  "test:unit": "vue-cli-service test:unit",
  "test:e2e": "vue-cli-service test:e2e --headless",
  "lint": "vue-cli-service lint",
  "test": "npm run test:unit && npm run test:e2e"
},


//to
"scripts": {
  "serve": "vite --port 8084",
  "dev": "npm run serve",
  "build": "vite build",
  "test:e2e": "nightwatch --headless",
  "test:unit": "vitest --run",
  "test": "npm run test:unit && npm run test:e2e",
  "lint": "eslint ."
},</code>

---

이러한 변경 사항을 통해 이제 Vite를 사용하여 Vue 2 프로젝트를 실행하고 Vite가 제공하는 모든 이점, 특히 향상된 빌드 성능을 누릴 수 있습니다.

---

다음 단계

다음 기사에서는 Vue CLI 플러그인 없이 Nightwatch를 활성화하고 Jest를 Vitest로 마이그레이션하는 방법을 공유하겠습니다. 계속 지켜봐주세요!

---

질문이 있거나 Vite에 대한 자신의 경험을 공유하고 싶다면 언제든지 댓글을 남겨주세요! ?

위 내용은 Vue CLI에서 Vite로 레거시 프로젝트 마이그레이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!