-
Notifications
You must be signed in to change notification settings - Fork 0
/
vite.config.ts
121 lines (117 loc) · 3.81 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
115
116
117
118
119
120
121
import { defineConfig, loadEnv, UserConfig, ConfigEnv, type PluginOption } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import UnoCSS from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
import viteCompression from 'vite-plugin-compression';
import pages from './pages.config';
import { createMpaPlugin, createPages } from 'vite-plugin-virtual-mpa';
import Info from 'unplugin-info/vite';
import path, { resolve } from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import VueDevTools from 'vite-plugin-vue-devtools';
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const env = loadEnv(mode, process.cwd(), '');
console.log('====build-env====', env.VITE_ENV_NAME);
return {
base: './',
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [
vue(),
vueJsx(),
Components({
resolvers: [VantResolver()],
}),
AutoImport({
//要想在项目中优雅地使用自动导入,还要解决以下两个编码的问题:
//TS 类型丢失,会导致 TS 编译报错
//插件会在项目根目录生成类型文件 auto-imports.d.ts ,确保该文件在 tsconfig 中被 include
dts: true,
imports: ['vue', 'vue-router'],
resolvers: [VantResolver()],
//插件会在项目根目录生成类型文件 .eslintrc-auto-import.json ,确保该文件在 eslint 配置中被 extends:
// .eslintrc.js
// module.exports = {
// extends: [
// './.eslintrc-auto-import.json',
// ],
// }
// eslintrc: {
// enabled: true,
// },
}),
UnoCSS({
/* options */
}),
viteCompression(),
// eslint-disable-next-line @typescript-eslint/no-explicit-any
visualizer({ open: false }) as PluginOption,
importToCDN({
modules: [
// {
// name: "lodash-es",
// var: "lodash",
// path: "https://unpkg.com/[email protected]/lodash.js",
// },
],
}),
VueDevTools(),
createMpaPlugin({
pages: createPages(pages),
}),
Info(),
],
build: {
rollupOptions: {
/*多页打包配置*/
// input: {
// main: resolve(__dirname, 'index.html'),
// pageA: resolve(__dirname, 'pages/pageA/index.html'), //http://localhost:5173/pages/pageA/
// },
output: {
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'],
},
// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
entryFileNames: 'js/[name].[hash].js',
// 用于命名代码拆分时创建的共享块的输出命名
chunkFileNames: 'js/[name].[hash].js',
// 用于输出静态资源的命名,[ext]表示文件扩展名
assetFileNames: '[ext]/[name].[hash].[ext]',
},
// 不打包依赖
// external: ["lodash-es"],
},
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
/*全局less变量 */
hack: `true; @import (reference) "${path.resolve('src/style/variables.less')}";`,
},
math: 'strict',
javascriptEnabled: true,
},
},
postcss: {
plugins: [],
},
},
server: {
// port: 3002,
// host: "0.0.0.0",
// proxy: {
// [VITE_API_URL_PREFIX]: "http://127.0.0.1:3000/",
// },
},
};
});