-
Notifications
You must be signed in to change notification settings - Fork 3
/
vite.config.ts
114 lines (113 loc) · 3.86 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
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
105
106
107
108
109
110
111
112
113
114
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import react from '@vitejs/plugin-react';
import path from 'path';
import CONSTS from './src/utils/CONSTS';
import { svgBuilder } from './src/components/use-svg/loader';
import UnoCSS from 'unocss/vite';
export default defineConfig({
base: `/${CONSTS.PREFIX_URL}/`,
plugins: [
vue({
template: {
compilerOptions: {
// 将micro-app-前缀的标签名都视为自定义元素
isCustomElement: (tag) => tag.startsWith('micro-app') || tag.startsWith('fl-'),
},
},
}),
react(),
UnoCSS(),
/** svg处理 */
svgBuilder('./src/assets/svg/'),
],
css: {
preprocessorOptions: {
scss: {
/** 覆盖掉element-plus原来的变量, 用命名空间解决覆盖子应用样式问题 */
additionalData: `@use "@/style/element-plus.cover.scss" as *;`,
},
},
},
resolve: {
alias: {
/** cdn位置 或 相对当前文件的位置 (本地运行时生效,打包external时不会替换关键词!!!) */
'@': path.resolve(__dirname, 'src'),
},
},
server: {
port: CONSTS.PORT,
host: '0.0.0.0',
cors: true,
proxy: {
/** request发起的请求都以/nest开头 */
'/nest': {
target: 'http://localhost:9000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/nest/, ''),
},
},
},
build: {
outDir: 'build',
/** 配置资源打包目录 */
assetsDir: './js',
/** 分包后警告大小(未压缩大小) */
chunkSizeWarningLimit: 800,
/**
* 启用/禁用 CSS 代码拆分
* 除去element.css,其它所有css加起来gzip后大约是30kb(工作台加载20个css大小约是20kb)
* 不拆分css能加快首次渲染速度,但css变化会导致hash变化,但是从缓存中读取多个css文件也比较耗时(可以改为强缓存!)
*/
cssCodeSplit: true,
rollupOptions: {
plugins: [],
/** 打包排除这些依赖,保持import { xxx } from 'vue';这种导入 */
external: ['vue', 'vue-router', '@micro-zoe/micro-app'],
output: {
format: 'esm', // 打包模式
/**
* 从对应网络路径中加载依赖
* 对于external排除的依赖,直接从'vue'导入是无效的路径,所以需要配置对应资源路径
*/
paths: {
vue: `/${CONSTS.PREFIX_URL}/js/vue.cd730000_h.js`,
'vue-router': `/${CONSTS.PREFIX_URL}/js/vue-router.4bcc0000_h.js`,
'@micro-zoe/micro-app': `/${CONSTS.PREFIX_URL}/js/micro-app.4e9a0000_h.js`,
},
/** 分包 */
manualChunks: {
// 'micro-app': ['@micro-zoe/micro-app'],
},
/** 入口文件输出格式 */
entryFileNames: 'js/[name].[hash]_h.js',
/** js文件输出格式 */
chunkFileNames: 'js/[name].[hash]_h.js',
/** 资源文件输出格式 */
assetFileNames: (assetInfo) => {
/** 默认输出格式 */
const defaultFormat = '[ext]/[name].[hash]_h.[ext]';
/** 图片后缀 */
const imageExts = ['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg', 'ico'];
/** 字体后缀 */
const fontExts = ['ttf', 'woff', 'woff2'];
/** 当前文件后缀 */
const fileExt = assetInfo.name?.split('.').slice(-1)[0];
/** 提取文件后缀异常处理 */
if (!fileExt) {
console.warn('>>> 文件后缀异常: ', assetInfo);
return defaultFormat;
}
/** 图片资源 */
if (imageExts.includes(fileExt)) {
return 'img/[name].[hash]_h.[ext]';
} else if (fontExts.includes(fileExt)) {
return 'font/[name].[hash]_h.[ext]';
}
/** 其它资源 */
return defaultFormat;
},
},
},
},
});