如何将 Vite 添加到现有的 Vue3 Typescript 项目

Vite 基本上是webpack的替代品，并且可以非常快速地构建您的 JavaScript 包。它有：

• 即时服务器启动
• ⚡️ 热模块更换 (HMR)
• ️ 丰富的功能
• 优化构建
• 通用插件
• 全类型 API

但是如何使它与现有的 Vue3 Typescript 项目一起工作？

        首先，您要安装 Vite 和 @vitejs/plugin-vue 作为开发人员依赖项。

npm install vite @vitejs/plugin-vue --save-dev

之后，您需要"dev": "vite"在脚本中添加{ .. } 对象package.json。

您也可以选择与更换build命令"build": "vue-tsc --noEmit && vite build"，并"serve"与"serve": "vite preview"

现在，您需要添加一个名为"vite.config.ts"项目根文件夹的文件，其内容如下：

// vite.config.ts
import {defineConfig } from "vite";
从“@vitejs/plugin-vue”导入 vue；
从“路径”导入路径；

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "/src"),
},
},
define: {
"process.env": {} ,
},
});

        这个配置ü口粮确保您的导入路径喜欢HelloWorld from "@/components/HelloWorld.vue";决心/ src目录，其中Vite的可以处理。

        Vite 以不同的方式公开环境变量（在此处查看更多信息），这就是为什么process在您现有的项目中不再起作用的原因。

就这样？还没有

        您还应该删除index.htmlpublic/ 文件夹中的 ，因为 Vite 将其视为所谓的“模块图”的一部分（更多在这里）。

        一个新的可能看起来像这样。它必须在根文件夹中。请注意，它引用了您的/src/main.ts.

 

这就是你可以运行的：

npm run dev

那么