|
|
// vite.config.mts
|
|
|
import { resolve } from 'path';
|
|
|
import path from 'path'
|
|
|
import { fileURLToPath, URL } from 'node:url';
|
|
|
import { defineConfig, ConfigEnv, UserConfig, loadEnv } from 'vite';
|
|
|
import vue from '@vitejs/plugin-vue';
|
|
|
import vueJsx from '@vitejs/plugin-vue-jsx';
|
|
|
import vueDevTools from 'vite-plugin-vue-devtools';
|
|
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
|
|
|
import viteCompression from 'vite-plugin-compression';
|
|
|
import pkg from './package.json';
|
|
|
import dts from 'vite-plugin-dts';
|
|
|
import UnoCSS from 'unocss/vite';
|
|
|
// 由于我们使用的是 ESM，不再需要 const path = require('node:path');
|
|
|
// 直接使用 import { resolve } from 'path'; 即可
|
|
|
|
|
|
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
|
|
const root = process.cwd();
|
|
|
const env = loadEnv(mode, root);
|
|
|
|
|
|
return {
|
|
|
base: env.VITE_PUBLIC_PATH,
|
|
|
root,
|
|
|
plugins: [
|
|
|
vue(),
|
|
|
// 只在库模式下生成声明文件
|
|
|
...(mode === 'lib' || mode === 'npm'
|
|
|
? [
|
|
|
dts({
|
|
|
tsconfigPath: 'tsconfig.app.json'
|
|
|
})
|
|
|
]
|
|
|
: []),
|
|
|
vueJsx(),
|
|
|
vueDevTools(),
|
|
|
// 使用 svg 图标
|
|
|
// createSvgIconsPlugin({
|
|
|
// iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
|
|
|
// symbolId: 'icon-[dir]-[name]'
|
|
|
// }),
|
|
|
createSvgIconsPlugin({
|
|
|
// 指定需要缓存的图标文件夹
|
|
|
iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs/icons')],
|
|
|
// 指定 symbolId 格式，也就是我们在使用时图标名称的格式
|
|
|
symbolId: 'icon-[dir]-[name]',
|
|
|
}),
|
|
|
UnoCSS({
|
|
|
// 在低版本浏览器上开发时会报错 Unexpected reserved word
|
|
|
// 如果在开发环境需要兼容不支持顶级await的低版本浏览器例如Chrome(v87)，就将下面的配置打开
|
|
|
// hmrTopLevelAwait: false
|
|
|
}),
|
|
|
createSvgIconsPlugin({
|
|
|
// 指定需要缓存的图标文件夹
|
|
|
iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
|
|
|
// 指定symbolId格式
|
|
|
symbolId: 'mt-edit-[name]',
|
|
|
// 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
|
|
|
svgoOptions: false,
|
|
|
customDomId: '___mt__edit__icons__dom__'
|
|
|
}),
|
|
|
// 配置 gzip 压缩插件
|
|
|
viteCompression({
|
|
|
algorithm: 'gzip', // 使用 gzip 压缩
|
|
|
ext: '.gz', // 压缩文件扩展名
|
|
|
threshold: 10240, // 只有大于 10 KB 的文件才会被压缩
|
|
|
deleteOriginFile: false // 不删除源文件
|
|
|
})
|
|
|
],
|
|
|
define: {
|
|
|
__APP_VERSION__: JSON.stringify(pkg.version)
|
|
|
},
|
|
|
resolve: {
|
|
|
alias: {
|
|
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
|
|
'package.json': new URL('package.json', import.meta.url).pathname
|
|
|
}
|
|
|
},
|
|
|
css: {
|
|
|
preprocessorOptions: {
|
|
|
scss: {
|
|
|
api: 'modern-compiler', // https://github.com/sass/dart-sass/issues/2395#issuecomment-988870897
|
|
|
additionalData: `@use "@/styles/element/index.scss" as *;`
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
server: {
|
|
|
host: '0.0.0.0',
|
|
|
port: Number(env.VITE_PORT),
|
|
|
open: env.VITE_OPEN === 'true',
|
|
|
proxy: {
|
|
|
'/api': {
|
|
|
target: env.VITE_API_URL,
|
|
|
changeOrigin: true,
|
|
|
ws: true,
|
|
|
rewrite: path => path.replace(new RegExp(`^/api`), ''),
|
|
|
// https is require secure=false
|
|
|
...(/^https:\/\//.test(env.VITE_API_URL) ? { secure: false } : {})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
};
|
|
|
});
|