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()
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
};
|