-
Notifications
You must be signed in to change notification settings - Fork 0
/
vite.config.ts
75 lines (72 loc) · 2.13 KB
/
vite.config.ts
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
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 下面这两行引入是为了自动解析模板中的使用到的组件,并导入组件
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import { resolve } from 'path';
// svg 组件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
// 下面这个插件可以给index.html注入内容
import { createHtmlPlugin } from 'vite-plugin-html';
// 下面这个插件用于可视化打包后各个资源占用大小
import { visualizer } from 'rollup-plugin-visualizer';
// 引入mock
import { viteMockServe } from 'vite-plugin-mock';
function pathResolve(dir: string): string {
return resolve(__dirname, dir);
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [NaiveUiResolver()],
}),
createSvgIconsPlugin({
iconDirs: [pathResolve('src/icons')],
symbolId: 'icon-[dir]-[name]',
}),
createHtmlPlugin({
inject: {
data: {
// 效果查看index.html中的<title>
title: 'index',
},
},
}),
visualizer({
// npm run dev后会自动生成该html于项目根目录
filename: '打包分析.html',
title: '可视化打包分析',
}),
viteMockServe({
mockPath: 'mock/api',
// 由于该插件会自动读取mockPath下的所有ts文件,所以可以设置ignore来忽略某些ts文件
// ignore: /^_/,
watchFiles: true,
localEnabled: true,
// 如果想生产环境引入mock则将以下注释打开
// prodEnabled: true,
// injectCode: `
// import { setupProdMockServer } from '/mock/mockProdServer';
// setupProdMockServer();
// `,
}),
],
resolve: {
// 设置别名
alias: [
{ find: '@', replacement: pathResolve('src') },
{ find: 'store', replacement: pathResolve('src') },
],
},
server: {
open: true,
// 如果跨域,在此配置
proxy: {
'/api': {
target: 'http://localhost:3000/',
},
},
},
});