From 1b571bd403d3bf247d9fdf5bc987f599b22e6daa Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Mon, 27 Mar 2023 18:57:57 +0800
Subject: [PATCH] fix: build style error
---
.env.front | 1 -
.env.test | 13 ++--
build/vite/plugin/index.ts | 10 +---
package.json | 1 +
pnpm-lock.yaml | 2 +
unocss.config.ts | 118 ++++++++++++++++++++++---------------
vite.config.ts | 2 +-
7 files changed, 85 insertions(+), 62 deletions(-)
diff --git a/.env.front b/.env.front
index 1d697cb..f67abbd 100644
--- a/.env.front
+++ b/.env.front
@@ -13,7 +13,6 @@ VITE_PROXY = [["/dev-api","http://api-dashboard.yudao.iocoder.cn"],["/upload","h
# 是否删除Console.log
VITE_DROP_CONSOLE = false
-# 接口地址
# 接口地址
VITE_GLOB_BASE_URL = "http://api-dashboard.yudao.iocoder.cn"
# 如果没有跨域问题，直接在这里配置即可
diff --git a/.env.test b/.env.test
index 23f0d53..efb236e 100644
--- a/.env.test
+++ b/.env.test
@@ -1,5 +1,3 @@
-NODE_ENV=production
-
# 资源公共路径,需要以 / 开头和结尾
VITE_PUBLIC_PATH = /
@@ -9,20 +7,21 @@ VITE_DROP_CONSOLE = true
# 打包是否输出gz｜br文件
# 可选: gzip | brotli | none
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
-VITE_BUILD_COMPRESS = 'none'
+VITE_BUILD_COMPRESS = 'gzip'
# 使用compress时是否删除源文件，默认false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
-# 接口地址 可以由nginx做转发或者直接写实际地址
-VITE_GLOB_BASE_URL = "http://localhost:48080"
-VITE_GLOB_API_URL = /admin-ap
+# 接口地址
+VITE_GLOB_BASE_URL = "http://api-dashboard.yudao.iocoder.cn"
+# 如果没有跨域问题，直接在这里配置即可
+VITE_GLOB_API_URL = /admin-api
# 文件上传地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_UPLOAD_URL = /upload
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
-VITE_GLOB_API_URL_PREFIX =
+VITE_GLOB_API_URL_PREFIX =
# 打包是否开启pwa功能
VITE_USE_PWA = false
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 313348c..0eed347 100644
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -13,9 +13,8 @@ import { configStyleImportPlugin } from './styleImport'
import { configVisualizerConfig } from './visualizer'
import { configThemePlugin } from './theme'
import { configSvgIconsPlugin } from './svgSprite'
-import { isProdFn } from '../../utils'
-export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boolean) {
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
const { VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
const vitePlugins: (PluginOption | PluginOption[])[] = [
@@ -44,11 +43,6 @@ export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boole
// vite-plugin-purge-icons
vitePlugins.push(purgeIcons())
- // vite-plugin-style-import
- if (isProdFn(mode)) {
- vitePlugins.push(configStyleImportPlugin(isBuild))
- }
-
// rollup-plugin-visualizer
vitePlugins.push(configVisualizerConfig())
@@ -57,6 +51,8 @@ export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boole
// The following plugins only work in the production environment
if (isBuild) {
+ // vite-plugin-style-import
+ vitePlugins.push(configStyleImportPlugin(isBuild))
// rollup-plugin-gzip
vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
diff --git a/package.json b/package.json
index f34a8a4..441c912 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
"@types/sortablejs": "^1.15.1",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
+ "@unocss/preset-wind": "^0.50.6",
"@unocss/transformer-directives": "^0.50.6",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80aa5fb..85e748e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,7 @@ specifiers:
'@types/sortablejs': ^1.15.1
'@typescript-eslint/eslint-plugin': ^5.56.0
'@typescript-eslint/parser': ^5.56.0
+ '@unocss/preset-wind': ^0.50.6
'@unocss/transformer-directives': ^0.50.6
'@vitejs/plugin-vue': ^4.1.0
'@vitejs/plugin-vue-jsx': ^3.0.1
@@ -150,6 +151,7 @@ devDependencies:
'@types/sortablejs': 1.15.1
'@typescript-eslint/eslint-plugin': 5.56.0_2hcjazgfnbtq42tcc73br2vup4
'@typescript-eslint/parser': 5.56.0_j4766f7ecgqbon3u7zlxn5zszu
+ '@unocss/preset-wind': 0.50.6
'@unocss/transformer-directives': 0.50.6
'@vitejs/plugin-vue': 4.1.0_vite@4.2.1+vue@3.2.47
'@vitejs/plugin-vue-jsx': 3.0.1_vite@4.2.1+vue@3.2.47
diff --git a/unocss.config.ts b/unocss.config.ts
index cbc6fce..e0ba5e4 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -1,10 +1,36 @@
import { defineConfig, presetAttributify, presetMini, presetUno } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
+import presetWind from '@unocss/preset-wind'
import { primaryColor } from './build/config/themeConfig'
export default defineConfig({
exclude: ['node_modules', 'dist', '.git', '.husky', '.vscode', 'public', 'build'],
- presets: [presetMini({ dark: 'class' }), presetAttributify(), presetUno()],
+ presets: [
+ presetMini({ dark: 'class' }),
+ presetAttributify(),
+ presetUno(),
+ presetWind({
+ darkMode: 'class',
+ plugins: [createEnterPlugin()],
+ theme: {
+ extend: {
+ zIndex: {
+ '-1': '-1'
+ },
+ colors: {
+ primary: primaryColor
+ },
+ screens: {
+ sm: '576px',
+ md: '768px',
+ lg: '992px',
+ xl: '1200px',
+ '2xl': '1600px'
+ }
+ }
+ }
+ })
+ ],
transformers: [transformerDirectives()],
theme: {
extend: {
@@ -29,48 +55,48 @@ export default defineConfig({
* Used for animation when the element is displayed.
* @param maxOutput The larger the maxOutput output, the larger the generated css volume.
*/
-// function createEnterPlugin(maxOutput = 6) {
-// const createCss = (index: number, d = 'x') => {
-// const upd = d.toUpperCase()
-// return {
-// [`*> .enter-${d}:nth-child(${index})`]: {
-// transform: `translate${upd}(50px)`
-// },
-// [`*> .-enter-${d}:nth-child(${index})`]: {
-// transform: `translate${upd}(-50px)`
-// },
-// [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-// 'z-index': `${10 - index}`,
-// opacity: '0',
-// animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-// 'animation-fill-mode': 'forwards',
-// 'animation-delay': `${(index * 1) / 10}s`
-// }
-// }
-// }
-// const handler = ({ addBase }) => {
-// const addRawCss = {}
-// for (let index = 1; index < maxOutput; index++) {
-// Object.assign(addRawCss, {
-// ...createCss(index, 'x'),
-// ...createCss(index, 'y')
-// })
-// }
-// addBase({
-// ...addRawCss,
-// [`@keyframes enter-x-animation`]: {
-// to: {
-// opacity: '1',
-// transform: 'translateX(0)'
-// }
-// },
-// [`@keyframes enter-y-animation`]: {
-// to: {
-// opacity: '1',
-// transform: 'translateY(0)'
-// }
-// }
-// })
-// }
-// return { handler }
-// }
+function createEnterPlugin(maxOutput = 6) {
+ const createCss = (index: number, d = 'x') => {
+ const upd = d.toUpperCase()
+ return {
+ [`*> .enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(50px)`
+ },
+ [`*> .-enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(-50px)`
+ },
+ [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+ 'z-index': `${10 - index}`,
+ opacity: '0',
+ animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+ 'animation-fill-mode': 'forwards',
+ 'animation-delay': `${(index * 1) / 10}s`
+ }
+ }
+ }
+ const handler = ({ addBase }) => {
+ const addRawCss = {}
+ for (let index = 1; index < maxOutput; index++) {
+ Object.assign(addRawCss, {
+ ...createCss(index, 'x'),
+ ...createCss(index, 'y')
+ })
+ }
+ addBase({
+ ...addRawCss,
+ [`@keyframes enter-x-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateX(0)'
+ }
+ },
+ [`@keyframes enter-y-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateY(0)'
+ }
+ }
+ })
+ }
+ return { handler }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 05785a1..48478d6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -92,7 +92,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
},
// The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
- plugins: createVitePlugins(mode, viteEnv, isBuild),
+ plugins: createVitePlugins(viteEnv, isBuild),
optimizeDeps: { include, exclude }
}