Vite + Vue2

Vite는 Vue3을 기반으로 프로젝트를 생성해 준다.
개인적으로 최신 버전을 사용하는 것을 좋아하지만 Vue는 아직 Vue3지원하지 않는 모듈이 좀 있는 것으로 보인다.
해서 본의 아니게 Vue2를 사용해야 하는 경우, Vite를 사용하여 Vue2 프로젝트를 생성하는 법을 기록해둔다.

Vite 공식 문서를 따라 프로젝트 생성

$ npm create vite@latest

$ yarn create vite

참조. https://vitejs.dev/guide/

생성된 프로젝트 구조 변경

package.json의 버전을 vue 2로 변경 (작성일 기준: 2.7.14)

{
  ...
  "dependencies": {
    "vue": "^2.7.14",
    ...
  },
  "devDependencies": {
    "vite": "^3.2.3",
  }
}

참조. https://www.npmjs.com/package/vue?activeTab=versions

@vitejs/plugin-vue 삭제. 경우에 따라 '--legacy-peer-deps' 옵션을 줘야할 수 도 있다.

$ npm remove @vitejs/plugin-vue
or
$ npm remove @vitejs/plugin-vue --legacy-peer-deps

vite-plugin-vue2 모듈 설치.

$ npm add vite-plugin-vue2 -D

vite.config.js 파일 수정.

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';

export default defineConfig({
  plugins: [createVuePlugin()],
});

Code를 Vue2 스타일로 변경

Vue2 스타일로 변경하지 않을 경우 아래 에러를 볼 수 있다.

[vite] Internal server error: Component template should contain exactly one root element.
If you are using v-if on multiple elements, use v-else-if to chain them instead.

main.js 변경

import Vue from 'vue';
import App from './App.vue';
import './style.css'

new Vue({
  render: (h) => h(App),
}).$mount('#app');

App.vue 변경

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  }
}
</script>

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <img alt="Vue Logo" src="./assets/vue.svg" />
    <hello-world msg="Hello Vue2 + Vite" />
  </div>
</template>