134 lines
5.4 KiB
Java
134 lines
5.4 KiB
Java
import vue from '@vitejs/plugin-vue';
|
||
// 利用插件动态主题模式和预设主题模式
|
||
import { themePreprocessorHmrPlugin, themePreprocessorPlugin } from '@zougt/vite-plugin-theme-preprocessor';
|
||
import path, { resolve } from 'path';
|
||
import AutoImport from 'unplugin-auto-import/vite';
|
||
import Icons from 'unplugin-icons/vite';
|
||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||
import Components from 'unplugin-vue-components/vite';
|
||
import { defineConfig, loadEnv } from 'vite';
|
||
import { vitePluginIconSvg } from './src/layouts/components/IconSvg/plugin';
|
||
|
||
const prefix = 'VUE_APP';
|
||
|
||
export default (serve) => {
|
||
const ENV = loadEnv(serve.mode, process.cwd(), prefix);
|
||
return defineConfig({
|
||
base: ENV.VUE_APP_PUBLIC_PATH,
|
||
build: {
|
||
outDir: ENV.VUE_APP_NAME,
|
||
chunkSizeWarningLimit: 1500,
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks(id) {
|
||
if (id.includes('node_modules')) {
|
||
return id.toString().split('node_modules/')[1].split('/')[0].toString();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
envPrefix: prefix,
|
||
resolve: {
|
||
alias: {
|
||
'@': resolve(__dirname, 'src')
|
||
}
|
||
},
|
||
server: {
|
||
port: 8081,
|
||
// host: '192.168.3.222', // 局域网内测试【填写你的当前IP】
|
||
proxy: {
|
||
'/.*/sso': {
|
||
target: process.env.VUE_APP_SSO,
|
||
changeOrigin: true,
|
||
secure: true,
|
||
pathRewrite: { '^/.*/sso': '/sso' }
|
||
},
|
||
'/boot': {
|
||
target: 'http://localhost:8511',
|
||
changeOrigin: true
|
||
},
|
||
'/api': {
|
||
target: 'http//192.168.3.218:7056/',
|
||
changeOrigin: true
|
||
}
|
||
},
|
||
cors: true
|
||
},
|
||
plugins: [
|
||
vue(),
|
||
AutoImport({
|
||
imports: ['vue', 'pinia', 'vue-i18n', 'vue-router', '@vueuse/core'],
|
||
resolvers: [ElementPlusResolver()]
|
||
}),
|
||
Components({
|
||
resolvers: [
|
||
ElementPlusResolver({
|
||
importStyle: 'sass' // 实现element自定义主题 & 切换，这里选择 sass
|
||
})
|
||
]
|
||
}),
|
||
Icons({
|
||
compiler: 'vue3',
|
||
autoInstall: true
|
||
}),
|
||
vitePluginIconSvg(),
|
||
// 创建预设主题切换
|
||
themePreprocessorPlugin({
|
||
scss: {
|
||
// 是否启用任意主题色模式，这里不启用
|
||
arbitraryMode: false,
|
||
// 提供多组变量文件
|
||
multipleScopeVars: [
|
||
{
|
||
scopeName: 'theme-default',
|
||
// 变量文件内容不应该夹带样式代码，设定上只需存在变量
|
||
path: path.resolve('src/theme/default/default.scss')
|
||
},
|
||
{
|
||
scopeName: 'theme-green',
|
||
path: path.resolve('src/theme/green/green.scss')
|
||
},
|
||
{
|
||
scopeName: 'theme-blue',
|
||
path: path.resolve('src/theme/blue/blue.scss')
|
||
},
|
||
{
|
||
scopeName: 'theme-dark',
|
||
path: path.resolve('src/theme/dark/dark.scss')
|
||
},
|
||
{
|
||
scopeName: 'theme-red',
|
||
path: path.resolve('src/theme/red/red.scss')
|
||
}
|
||
],
|
||
// css中不是由主题色变量生成的颜色，也让它抽取到主题css内，可以提高权重
|
||
includeStyleWithColors: [
|
||
{
|
||
color: '#ffffff',
|
||
// 此类颜色的是否跟随主题色梯度变化，默认false
|
||
inGradient: true
|
||
}
|
||
],
|
||
// 默认取 multipleScopeVars[0].scopeName
|
||
defaultScopeName: '',
|
||
// 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
|
||
extract: true,
|
||
// 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
|
||
outputDir: '',
|
||
// 会选取defaultScopeName对应的主题css文件在html添加link
|
||
themeLinkTagId: 'head',
|
||
// "head"||"head-prepend" || "body" ||"body-prepend"
|
||
themeLinkTagInjectTo: 'head',
|
||
// 是否对抽取的css文件内对应scopeName的权重类名移除
|
||
removeCssScopeName: false,
|
||
// 可以自定义css文件名称的函数
|
||
customThemeCssFileName: (scopeName) => scopeName
|
||
}
|
||
}),
|
||
// 主题热更新，不得已分开插件，因为需要vite插件顺序enforce
|
||
themePreprocessorHmrPlugin()
|
||
]
|
||
});
|
||
};
|