vite.config.ts
3.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { fileURLToPath } from 'node:url'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VueRouterAutoImports, getPascalCaseRouteName } from 'unplugin-vue-router'
import VueRouter from 'unplugin-vue-router/vite'
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
import Layouts from 'vite-plugin-vue-layouts'
import vuetify from 'vite-plugin-vuetify'
import svgLoader from 'vite-svg-loader'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// Docs: https://github.com/posva/unplugin-vue-router
// ℹ️ This plugin should be placed before vue plugin
VueRouter({
getRouteName: routeNode => {
// Convert pascal case to kebab case
return getPascalCaseRouteName(routeNode)
.replace(/([a-z\d])([A-Z])/g, '$1-$2')
.toLowerCase()
},
}),
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag === 'swiper-container' || tag === 'swiper-slide',
},
},
}),
VueDevTools(),
vueJsx(),
// Docs: https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
vuetify({
styles: {
configFile: 'src/assets/styles/variables/_vuetify.scss',
},
}),
// Docs: https://github.com/johncampionjr/vite-plugin-vue-layouts#vite-plugin-vue-layouts
Layouts({
layoutsDirs: './src/layouts/',
}),
// Docs: https://github.com/antfu/unplugin-vue-components#unplugin-vue-components
Components({
dirs: ['src/@core/components', 'src/views/demos', 'src/components'],
dts: true,
resolvers: [
componentName => {
// Auto import `VueApexCharts`
if (componentName === 'VueApexCharts')
return { name: 'default', from: 'vue3-apexcharts', as: 'VueApexCharts' }
},
],
}),
// Docs: https://github.com/antfu/unplugin-auto-import#unplugin-auto-import
AutoImport({
imports: ['vue', VueRouterAutoImports, '@vueuse/core', '@vueuse/math', 'vue-i18n', 'pinia'],
dirs: [
'./src/@core/utils',
'./src/@core/composable/',
'./src/composables/',
'./src/utils/',
'./src/plugins/*/composables/*',
],
vueTemplate: true,
// ℹ️ Disabled to avoid confusion & accidental usage
ignore: ['useCookies', 'useStorage'],
}),
svgLoader(),
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@themeConfig': fileURLToPath(new URL('./themeConfig.ts', import.meta.url)),
'@core': fileURLToPath(new URL('./src/@core', import.meta.url)),
'@layouts': fileURLToPath(new URL('./src/@layouts', import.meta.url)),
'@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
'@styles': fileURLToPath(new URL('./src/assets/styles/', import.meta.url)),
'@configured-variables': fileURLToPath(new URL('./src/assets/styles/variables/_template.scss', import.meta.url)),
'@db': fileURLToPath(new URL('./src/plugins/fake-api/handlers/', import.meta.url)),
'@api-utils': fileURLToPath(new URL('./src/plugins/fake-api/utils/', import.meta.url)),
},
},
build: {
chunkSizeWarningLimit: 5000,
},
optimizeDeps: {
exclude: ['vuetify'],
entries: [
'./src/**/*.vue',
],
},
})