Vite3 + Vue2.7 环境搭建(TS)

前言

根据vite官网的描述：

> Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。

因此需要注意前端线上构建的服务器环境的nodejs版本。

基础环境搭建 

1. 执行npm init vite@latest
2. 选择vanilla 创建一个空项目。因为选择vue 会创建vue3的项目。
3. 然后手动调整项目中的目录接口，把原来的无用的代码该删除的删除，最终达到如下效果。
   
   红框中的文件是新建的

4. 想使vite支持vue2.7 需要安装插件 npm i @vitejs/plugin-vue2 -D
   vite.config.js

   import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue2'; export default defineConfig({ plugins: [vue()], });

5. 文件
   1. App.vue 中的文件随意写
   2. index.html 文件中的 script 标签中引入的 main.js 路径要改变

   3. main.js

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

准备完成后运行npm run dev 即可正常运行开发环境。

css 支持（默认支持）

less支持

npm i less -D 即可支持

浏览器兼容(@vitejs/plugin-legacy)

vite/packages/plugin-legacy at main · vitejs/vite · GitHub

TypeScript支持

npm init vite@latest 的时候选择TypeScript创建即可。

vue 文件中 <script lang='ts'> 即可使用ts

添加声明文件

此时，main.ts 中import 的.vue后缀的文件，会报ts类型异常。

这个同vue-cli 创建的vue-ts 项目中的src/shims-vue.d.ts 的声明文件一样添加如下声明：

declare module '*.vue' { import Vue from 'vue'; export default Vue; }

我添加在vite-env.d.ts文件中。

相对与原选择JavaScript 创建的项目区别为：

这些文件手动从js更改、添加上去也可以的。

JSX支持

tsconfig.json 添加jsx: 'preserve' 配置

参考

Vite 创建Vue2项目 - 花几分钟动手练习 - 掘金 (juejin.cn)