vite是下一代前端开发与构建工具。 Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

Vite构建vue2.x项目实现步骤如下：

1.全局安装vite

npm install vite -g

#查看vite版本
vite --version
vite/4.4.8 win32-x64 node-v14.21.3

2.使用vite初始化项目

npm init vite@latest

输入项目名称，选择vue. 目前vite只支持Vue3版本，因此构建完成后需要修改为vue2项目结构。 语言选择：Javascript

构建完成后目录结构如下：

3.修改package.json

 "dependencies": {
    "vue": "^2.6.14"
  },

 "devDependencies": {
    "@vitejs/plugin-vue2": "^2.2.0",
    "vite": "^4.4.5",
    "vue-template-compiler": "^2.6.14"
 }

4.修改vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({

  plugins: [vue()],
})

5.修改HelloWorld.vue和App.vue

HelloWorld.vue和App.vue使用了Vue3语法糖，和vue2.x不兼容需要修改为Vue2.x的组件风格。

HelloWorld.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <div class="card">
      <button type="button" @click="count++">count is {{ count }}</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test HMR
      </p>
    </div>

    <p>
      Check out
      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
      >, the official Vue + Vite starter
    </p>
    <p>
      Install
      <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
      in your IDE for a better DX
    </p>
    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      msg: 'hello,vite!',
      count: 0
    }
  }
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

App.vue

<template>
  <div  id="app">
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo"/>
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>
      </a>
    </div>
    <HelloWorld msg="Vite + Vue"/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    components:{
      HelloWorld
    },
    data(){
      return{
      }
    }
  }
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

6.修改main.js

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

Vue.config.productionTip = false

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

7.启动运行

  VITE v4.4.8  ready in 366 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose