Vite в основном является заменой webpack и очень быстро создает ваши пакеты JavaScript. Она имеет:

  • 💡 Мгновенный запуск сервера
  • ⚡️ Горячая замена модуля (HMR)
  • 🛠️ Богатые возможности
  • 📦 Оптимизированная сборка
  • 🔩 Универсальные плагины
  • 🔑 Полностью типизированные API

Но как заставить его работать с существующим проектом Vue3 Typescript?

Сначала вы хотите установить Vite вместе с @vitejs/plugin-vue в качестве зависимостей разработчика.

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

После этого вам нужно добавить "dev": "vite" в объект scripts { .. } в package.json .

При желании вы можете заменить команду сборки на "build": "vue-tsc --noEmit && vite build" и "serve" на "serve": "vite preview"

Теперь вам нужно добавить файл с именем "vite.config.ts" в корневую папку проекта со следующим содержимым:

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

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

Эта конфигурация гарантирует, что ваши пути импорта, такие как HelloWorld from "@/components/HelloWorld.vue";, разрешаются в /src, что может обрабатывать Vite.

Vite по-другому предоставляет переменные среды (см. подробнее здесь), и поэтому process внутри вашего существующего проекта больше не работает.

Это все? Еще нет

Вы также должны удалить index.html в своей папке public/, потому что Vite рассматривает его как часть так называемого графа модулей (подробнее здесь).

Новый может выглядеть так. Он должен быть в корневой папке. Обратите внимание, что он ссылается на ваш /src/main.ts .

<!-- index.html -->
<!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

Так что насчет ‹названия›?

Я тоже хотел рассказать об этом, так как текущая страница больше не имеет стандартного заголовка веб-пакета.

npm install vue-meta vue-meta@alpha

С vue-meta вы можете решить эту проблему. Теперь вы можете добавить это в свой App.vue:

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

А внутри другого представления вы можете расширить стандартный заголовок до f.e. «Некоторая страница | Hello World Vite Test» в части ‹script›‹/script›.

export default defineComponent({
  components: { HelloWorld },
  setup() {
    useMeta({ title: "Some Page" });
  },
});

Я надеюсь, что теперь вы можете запустить Vite для своего проекта Typescript Vue3!