前言

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。
但在用它搭建项目时，选择vue模板，会默认创建一个 vue3 项目。
那能不能用vite搭建一个vue2的项目呢？答案是可以的。
我这里有一个已经搭建完的项目实例，具体方法请往下看。

搭建方法

1. 创建一个 vite 项目

以Yarn为例

先用 Vite 创建一个项目，详见官方文档

1
$ yarn create vite

然后按提示操作！

注意：在进行到第二步时时，即Select a framework:，不要选择vue，因为这样会创建一个vue3的项目，选择为vanilla，即原生 js, 然后通过插件和一些配置来改造成 vue2 项目。

2. 安装并配置依赖和插件

安装 vue2 （此处我安装的为 2.6.14 版本） 及相关依赖：

1
$ yarn add vue@2.6.14 vue-template-compiler

让 vite 支持 vue2，安装插件 vite-plugin-vue2：

1
$ yarn add vite-plugin-vue2 -D

创建 vite.config.js 文件并引入插件：

1
2
3
4
5
6
7
// vite.config.js
import { defineConfig } from 'vite';
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2';

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

3. 修改目录和文件内容

在根目录下创建 src 文件夹，并在文件夹下创建 App.vue：

1
2
3
4
<!-- App.vue -->
<template>
  <div id="app">Hello, Vue2 + Vite !</div>
</template>

修改 main.js 文件内容并将其移入 src：

1
2
3
4
5
6
7
8
// main.js
import Vue from 'vue';
import App from './App.vue';

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

关于 index.html，不需要创建public文件夹并将其移入（原因见：vite 官方文档），只需要修改 main.js 的路径即可：

1
2
3
4
5
<!-- index.html -->

<script type="module" src="/main.js"></script>
<!-- 修改为 -->
<script type="module" src="/src/main.js"></script>

至此，vite 搭建的 vue2 项目就基本完成了。
运行项目：

1
$ yarn dev
1
2
3
4
5
6
vite v2.9.6 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 520ms.

你可能会注意到，Network 那行好像不太对劲，我的 IP 地址打开方式哪去了？
不要慌只需要去 vite.config.js 配置一下 server.host 就可以了。

1
2
3
server: {
  host: '0.0.0.0'
}

进阶设置

详见 Github