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!