Vue 3 mit
Vite Dev Server
Vue 3 mit
Vite Dev Server
1
2
Das Problem mit Vue CLI
- Langsamer Start des Dev-Servers
- Langsames Hot Module Replacement (HMR)
3
Die Idee
4
Lösungsansatz von Vite
- Kein Bundling im Dev-Server
- Native JS Modules (ESM)
- On-demand Compilation
- Bundling für Production
5
package.json
Vue CLI
{
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^3.1.5",
"vue-router": "^4.0.10",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/cli-service": "^4.5.13",
"@vue/compiler-sfc": "^3.1.5",
"sass": "^1.37.5"
}
}Vite
{
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.1.5",
"vue-router": "^4.0.10",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.1.5",
"sass": "^1.37.5",
"vite": "^2.4.4"
}
}6
vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue()
]
}7
index.html
Vue CLI
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="…">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
// Built files will be auto injected
</body>
</html>Vite
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="…">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js">
</script>
</body>
</html>8
9