Vite 构建 Vue2.0 应用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

前面，我们已经了解了如何通过 Vite 构建 Vue3 项目，整个过程其实是非常的简单的。

使用 Vite 官方提供的 @vitejs/app 可以自动给我们生成一个 Vue3 的项目。我们在运行这个初始化的命令的时候，可以看到了在它的列表里面并没有出现 Vue2 支持。

因为 Vue2 并没有在 Vite 官方的插件列表中，也就是说 Vite 官方没有主动为 Vue2 提供一个官方的插件。

那么如果使用 Vite 构建 Vue2 项目，这里我们使用 vite-plugin-vue2 插件。

这个插件使用起来也非常的简单。

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'


export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

使用 Vite 构建 Vue2 项目与构建 Vue3 类似，选择框架支持的时候采用没有任何框架支持即可。

使用 VS Code 打开 vite-vue2 项目。

可以看到，和前面构建 Vue3 项目少了许多内容。

前面我们已经介绍过，你要使用 Vu2，必须安装 Vue2 插件依赖。

需要我们自己手动创建 vite.config.js 文件，同时导入 Vue2。

import {createVuePlugin} from "vite-plugin-vue2"


export default{
    Plugins:[createVuePlugin()]
}

我们在创建 vue2 项目时，没有选择任何框架的支持，因此需要安装 vue 的依赖。

如果不指定 Vue 版本，在运行项目的时候，会出现如下报错信息，版本不匹配问题。

安装成功之后，打开 package.json，可以看到如下内容。

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

创建 src 目录，在 src 目录下创建 App.vue。

<template>
    <div> Hello Vite Vue2</div>
</template>

将 main.js 移到 src 下，在该文件中导入相关内容。

import Vue from "vue";


import App from './App.vue';


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

修改 index.html 文件

//修改 index.html 之前
<script type="module" src="/main.js"></script>
//修改 index.html 之后
<script type="module" src="/src/main.js"></script>

运行 vite-vue2 项目。

打开浏览器，访问 localhost:3000。

有没有一个更简单的方法来去创建 Vue2 的项目呢？答案是有的。使用社区提供 awesome-vite 插件库构建 Vue2 项目。

详细内容这里我们就不做介绍，如果感兴趣，你可以尝试去实现操作。