Vite 搭建 Vue.js 项目的全面指南：掌握关键步骤，规避常见陷阱

2023-11-16 01:04:00

1. 시작하기

Vite를 사용하여 Vue.js 프로젝트를 구축하려면 먼저 컴퓨터에 필요한 환경을 설정해야 합니다. 이는 Node.js와 npm을 설치하는 것을 의미합니다. 또한, 편집기를 설치해야 하며, Visual Studio Code 또는 Atom과 같은 편집기를 추천합니다.

2. Vite 설치

환경을 설정했다면 Vite를 설치할 수 있습니다. 이렇게 하려면 명령 프롬프트 또는 터미널을 열고 다음 명령을 입력하세요.

npm install -g vite

3. 새로운 프로젝트 생성

Vite가 설치되었다면 새로운 프로젝트를 생성할 수 있습니다. 이렇게 하려면 명령 프롬프트 또는 터미널을 열고 다음 명령을 입력하세요.

vite create my-project

이렇게 하면 프로젝트 폴더가 생성되고 프로젝트에 필요한 모든 파일이 설치됩니다.

4. 프로젝트 실행

프로젝트를 생성했으면 프로젝트를 실행할 수 있습니다. 이렇게 하려면 명령 프롬프트 또는 터미널을 열고 프로젝트 디렉토리로 이동한 다음 다음 명령을 입력하세요.

npm run dev

이렇게 하면 개발 서버가 시작되고 프로젝트를 로컬로 실행할 수 있습니다.

5. 라우팅 구성

Vite 프로젝트에서 라우팅을 구성하려면 src/router/index.js 파일을 편집해야 합니다. 이 파일에는 프로젝트의 라우트가 정의되어 있습니다.

다음은 간단한 라우팅 구성의 예입니다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    }
  ]
})

export default router

6. CSS 프리프로세서 설정

Vite 프로젝트에서 CSS 프리프로세서를 설정하려면 vite.config.js 파일을 편집해야 합니다. 이 파일에는 Vite의 구성이 정의되어 있습니다.

다음은 Sass를 CSS 프리프로세서로 설정하는 예입니다.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import sass from 'sass'

export default defineConfig({
  plugins: [
    vue(),
    sass()
  ],
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `
          @import "@/styles/global.scss";
        `
      }
    }
  }
})

7. 프로젝트 구축

프로젝트를 구축하려면 명령 프롬프트 또는 터미널을 열고 프로젝트 디렉토리로 이동한 다음 다음 명령을 입력하세요.

npm run build

이렇게 하면 프로젝트가 구축되고 dist 폴더에 배포 파일이 생성됩니다.

8. 일반적인 문제

Vite를 사용하여 Vue.js 프로젝트를 구축할 때 발생할 수 있는 몇 가지 일반적인 문제가 있습니다.

프로젝트가 실행되지 않습니다. 이 문제는 Vite가 올바르게 설치되지 않았거나 프로젝트의 의존성이 올바르게 설치되지 않았기 때문일 수 있습니다.
라우팅이 작동하지 않습니다. 이 문제는 라우팅이 올바르게 구성되지 않았기 때문일 수 있습니다.
CSS 프리프로세서가 작동하지 않습니다. 이 문제는 CSS 프리프로세서가 올바르게 설정되지 않았기 때문일 수 있습니다.

이러한 문제가 발생하면 Vite의 설명서를 참조하거나 온라인 포럼에서 도움을 요청할 수 있습니다.

9. 결론

이 가이드에서는 Vite를 사용하여 Vue.js 프로젝트를 구축하는 방법에 대해 설명했습니다. 이 가이드를 따르면 프로젝트를 쉽게 설정하고 구축할 수 있습니다.