Skip to content

Commit e2eaa64

Browse files
cwandevcwandev
committed
refactor: Modularize Vite plugin management
1 parent d81c970 commit e2eaa64

File tree

3 files changed

+124
-126
lines changed

3 files changed

+124
-126
lines changed

‎build/vite/index.ts‎

Lines changed: 59 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,66 @@
1-
import path from 'node:path'
2-
import { viteVConsole } from 'vite-plugin-vconsole'
1+
import vue from '@vitejs/plugin-vue'
2+
import legacy from '@vitejs/plugin-legacy'
3+
import vueJsx from '@vitejs/plugin-vue-jsx'
4+
import { visualizer } from 'rollup-plugin-visualizer'
5+
import Components from 'unplugin-vue-components/vite'
6+
import AutoImport from 'unplugin-auto-import/vite'
7+
import VueRouter from 'unplugin-vue-router/vite'
8+
import { VueRouterAutoImports } from 'unplugin-vue-router'
9+
import { VantResolver } from 'unplugin-vue-components/resolvers'
10+
import { unheadVueComposablesImports } from '@unhead/vue'
11+
import VueDevTools from 'vite-plugin-vue-devtools'
12+
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
13+
import UnoCSS from 'unocss/vite'
14+
import { createViteVConsole } from './vconsole'
315

4-
// https://github.com/vadxq/vite-plugin-vconsole/issues/21
16+
export function createVitePlugins() {
17+
return [
18+
VueRouter({
19+
routesFolder: 'src/views',
20+
dts: 'src/typed-router.d.ts',
21+
}),
522

6-
export function createViteVConsole(command: 'serve' | 'build') {
7-
return viteVConsole({
8-
entry: [path.resolve('src/main.ts')],
9-
enabled: command === 'serve',
10-
config: {
11-
maxLogNumber: 1000,
12-
theme: 'light',
13-
},
14-
dynamicConfig: {
15-
theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
16-
},
17-
eventListener: `
18-
const targetElement = document.querySelector('html'); // 择要监听的元素
19-
const observerOptions = {
20-
attributes: true, // 监听属性变化
21-
attributeFilter: ['class'] // 只监听class属性变化
22-
};
23+
vue(),
24+
vueJsx(),
25+
visualizer(),
26+
UnoCSS(),
27+
mockDevServerPlugin(),
2328

24-
// 定义回调函数来处理观察到的变化
25-
function handleAttributeChange(mutationsList) {
26-
for(let mutation of mutationsList) {
27-
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
28-
if (window && window.vConsole) {
29-
window.vConsole.dynamicChange.value = new Date().getTime();
30-
}
31-
}
32-
}
33-
}
29+
legacy({
30+
targets: ['defaults', 'not IE 11'],
31+
}),
3432

35-
// 创建观察者实例并传入回调函数
36-
const observer = new MutationObserver(handleAttributeChange);
33+
Components({
34+
extensions: ['vue'],
35+
resolvers: [VantResolver()],
36+
include: [/\.vue$/, /\.vue\?vue/],
37+
dts: 'src/components.d.ts',
38+
}),
3739

38-
// 开始观察目标元素
39-
observer.observe(targetElement, observerOptions);
40+
AutoImport({
41+
include: [
42+
/\.[tj]sx?$/,
43+
/\.vue$/,
44+
/\.vue\?vue/,
45+
],
46+
imports: [
47+
'vue',
48+
'vitest',
49+
'@vueuse/core',
50+
VueRouterAutoImports,
51+
{
52+
'vue-router/auto': ['useLink'],
53+
},
54+
unheadVueComposablesImports,
55+
],
56+
dts: 'src/auto-imports.d.ts',
57+
dirs: [
58+
'src/composables',
59+
],
60+
}),
4061

41-
// 当不再需要观察时，停止观察
42-
// observer.disconnect();
43-
`,
44-
})
62+
createViteVConsole(),
63+
64+
VueDevTools(),
65+
]
4566
}

‎build/vite/vconsole.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import path from 'node:path'
2+
import { viteVConsole } from 'vite-plugin-vconsole'
3+
4+
export function createViteVConsole() {
5+
return viteVConsole({
6+
entry: [path.resolve('src/main.ts')],
7+
enabled: false,
8+
config: {
9+
maxLogNumber: 1000,
10+
theme: 'light',
11+
},
12+
// https://github.com/vadxq/vite-plugin-vconsole/issues/21
13+
dynamicConfig: {
14+
theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
15+
},
16+
eventListener: `
17+
const targetElement = document.querySelector('html'); // 择要监听的元素
18+
const observerOptions = {
19+
attributes: true, // 监听属性变化
20+
attributeFilter: ['class'] // 只监听class属性变化
21+
};
22+
23+
// 定义回调函数来处理观察到的变化
24+
function handleAttributeChange(mutationsList) {
25+
for(let mutation of mutationsList) {
26+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
27+
if (window && window.vConsole) {
28+
window.vConsole.dynamicChange.value = new Date().getTime();
29+
}
30+
}
31+
}
32+
}
33+
34+
// 创建观察者实例并传入回调函数
35+
const observer = new MutationObserver(handleAttributeChange);
36+
37+
// 开始观察目标元素
38+
observer.observe(targetElement, observerOptions);
39+
40+
// 当不再需要观察时，停止观察
41+
// observer.disconnect();
42+
`,
43+
})
44+
}

‎vite.config.ts‎

Lines changed: 21 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,37 @@ import path from 'node:path'
22
import process from 'node:process'
33
import { loadEnv } from 'vite'
44
import type { ConfigEnv, UserConfig } from 'vite'
5-
6-
import { visualizer } from 'rollup-plugin-visualizer'
7-
import Components from 'unplugin-vue-components/vite'
8-
import AutoImport from 'unplugin-auto-import/vite'
9-
import VueRouter from 'unplugin-vue-router/vite'
10-
import { VueRouterAutoImports } from 'unplugin-vue-router'
11-
import { VantResolver } from 'unplugin-vue-components/resolvers'
12-
import { unheadVueComposablesImports } from '@unhead/vue'
13-
14-
import vue from '@vitejs/plugin-vue'
15-
import legacy from '@vitejs/plugin-legacy'
16-
import vueJsx from '@vitejs/plugin-vue-jsx'
17-
185
import viewport from 'postcss-mobile-forever'
196
import autoprefixer from 'autoprefixer'
7+
import { createVitePlugins } from './build/vite'
208

21-
import VueDevTools from 'vite-plugin-vue-devtools'
22-
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
23-
24-
import UnoCSS from 'unocss/vite'
25-
import { createViteVConsole } from './build/vite'
26-
27-
export default ({ command, mode }: ConfigEnv): UserConfig => {
9+
export default ({ mode }: ConfigEnv): UserConfig => {
2810
const root = process.cwd()
2911
const env = loadEnv(mode, root)
3012

3113
return {
3214
base: env.VITE_APP_PUBLIC_PATH,
15+
plugins: createVitePlugins(),
3316

34-
plugins: [
35-
VueRouter({
36-
routesFolder: 'src/views',
37-
dts: 'src/typed-router.d.ts',
38-
}),
39-
40-
vue(),
41-
vueJsx(),
42-
visualizer(),
43-
UnoCSS(),
44-
mockDevServerPlugin(),
45-
46-
legacy({
47-
targets: ['defaults', 'not IE 11'],
48-
}),
49-
50-
Components({
51-
extensions: ['vue'],
52-
resolvers: [VantResolver()],
53-
include: [/\.vue$/, /\.vue\?vue/],
54-
dts: 'src/components.d.ts',
55-
}),
56-
57-
AutoImport({
58-
include: [
59-
/\.[tj]sx?$/,
60-
/\.vue$/,
61-
/\.vue\?vue/,
62-
],
63-
imports: [
64-
'vue',
65-
'vitest',
66-
'@vueuse/core',
67-
VueRouterAutoImports,
68-
{
69-
'vue-router/auto': ['useLink'],
70-
},
71-
unheadVueComposablesImports,
72-
],
73-
dts: 'src/auto-imports.d.ts',
74-
dirs: [
75-
'src/composables',
76-
],
77-
}),
78-
79-
createViteVConsole(command),
17+
server: {
18+
host: true,
19+
port: 3000,
20+
proxy: {
21+
'/api': {
22+
target: '',
23+
ws: false,
24+
changeOrigin: true,
25+
},
26+
},
27+
},
8028

81-
VueDevTools(),
82-
],
29+
resolve: {
30+
alias: {
31+
'~@': path.join(__dirname, './src'),
32+
'@': path.join(__dirname, './src'),
33+
'~': path.join(__dirname, './src/assets'),
34+
},
35+
},
8336

8437
css: {
8538
postcss: {
@@ -98,25 +51,5 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
9851
cssCodeSplit: false,
9952
chunkSizeWarningLimit: 2048,
10053
},
101-
102-
resolve: {
103-
alias: {
104-
'~@': path.join(__dirname, './src'),
105-
'@': path.join(__dirname, './src'),
106-
'~': path.join(__dirname, './src/assets'),
107-
},
108-
},
109-
110-
server: {
111-
host: true,
112-
port: 3000,
113-
proxy: {
114-
'/api': {
115-
target: '',
116-
ws: false,
117-
changeOrigin: true,
118-
},
119-
},
120-
},
12154
}
12255
}

0 commit comments

Comments
 (0)