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

Vite 基本上是webpack的替代品，并且可以非常快速地构建您的 JavaScript 包。它有：???? 即时服务器启动⚡️ 热模块更换 (HMR)????️ 丰富的功能???? 优化构建???? 通用插件???? 全类型 API但是如何使它与现有的 Vue3 Typescript 项目一起工作？首先，您要安装 Vite 和 @vitejs/plugin-vue 作为开发人员依赖项。npm

jeans5201

1329人浏览 · 2021-10-09 10:31:24

jeans5201 · 2021-10-09 10:31:24 发布

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.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico " />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>

<body>
<div id="app"></ div>
<script type="module" src="/src/main.ts"></script>
</body>

</html>

这就是你可以运行的：

npm run dev

那么 <title> 呢？

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

npm install vue-meta vue-meta@alpha

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

<template>
<metainfo>
<template v-slot:title="{ content }">{{
content ? `${内容} | Hello World Vite Test` : `Hello World Vite Test`
}}</template>
</metainfo>
...
<template>

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

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">export default defineComponent({ 
  components: { HelloWorld }, 
  setup() { 
    useMeta({ title: "Some Page" }); 
  }, 
});</span></span></span>

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