vite与ts的使用

---

前言

什么？？？vite1.0.0我还没熟悉呢你2.0就开始流行了吗
什么？？？vue2我才刚了如指掌你vue3就开始使用了吗
什么？？？算了，ts我一直都不会

---

一、Vite2 + TS 手动搭建

不用看这个一了，直接去看二去吧

1.搭建项目

使用 vite 搭建项目

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

开始依赖后便可以开始运行项目，当然还需要手动安装一些，可能还要升级 vite 版本

npm install typescript --save-dev
npm install vite@2.6.4 --save-dev

将 main.js 改为 main.ts
将 index.html 中引入的 main.js 改为 main.ts
将 vue 页面的<script> 改为 <script lang="ts">

2.配置文件

首先要创建主要的 vite.config.ts 、 tsconfig.json 以及一些类声明文件

先安装一下 types/node 这样就可以使用 process 获取环境和路径了

npm i --save-dev @types/node

再安装一下 @vitejs/plugin-vue vite的vue插件

npm i -D @vitejs/plugin-vue

再再安装一下 dotenv 将环境变量中的变量从 .env 文件加载到 process.env 中

npm i --save-dev dotenv

在根目录创建以下 env 环境文件

.env

# port 端口号
VITE_PORT = 8888

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = open

# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = /v3/

.env.development

# 本地环境
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'https://xxxx:xx/project/'

# 开发环境
VUE_APP_BASE_API = '/dev-api'

.env.production

# 线上环境
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = 'https://www.fastmock.site/mock/xxx'

# 线上环境
VUE_APP_BASE_API = '/pro-api'

然后写一个 vite 打包相关的工具类 vitebuild.ts ，放在 src/utils 目录下

import dotenv from 'do