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

        首先，您要安装 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

        我也想覆盖这个，因为当前页面不再有 webpack 标准标题。

npm install vue-meta vue-meta@alpha

使用 vue-meta 可以解决这个问题。您现在可以将其添加到您的 App.vue 中：

  {{ content ? `${内容} | Hello World Vite Test` : `Hello World Vite Test` }} ...

        在另一个视图中，您可以将标准标题扩展为 fe “Some Page |  部分中的 Hello World Vite Test”。

        我希望您现在可以为您的 Typescript Vue3 项目运行 Vite！七爪网 七爪网-专注于分销商城，小程序定制，网站开发，定制开发，成品源码的源码交易平台