Vite+Vue3+Antdv 4, all antdv4 component styles could not display on Safari 12 #6739
Unanswered
leeskyler-top
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
When I use npm to built the src, all antdv4 component styles could not display on Safari 12.
This is my vite.config.js:
`
import {fileURLToPath, URL} from 'node:url'
import legacy from '@vitejs/plugin-legacy'
import PostCssPresetEnv from 'postcss-preset-env';
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from "autoprefixer";
// import Components from 'unplugin-vue-components/vite';
// import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
legacy({
targets: [
"> 0.5%, last 1 version, ie >= 11",
"safari >= 13",
// "Android > 39",
// "Chrome >= 60",
// "Safari >= 10.1",
"iOS > 13",
// "Firefox >= 54",
// "Edge >= 15"
],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
polyfills: ["es.promise.finally", "es/map", "es/set"],
// modernPolyfills: ["es.promise.finally"]
modernPolyfills: true,
}),
// Components({
// resolvers: [AntDesignVueResolver()],
// }),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
//TODO 设置资源根路径,默认为 '/' 导致只能在根目录下访问。 修改为 './' 即可访问相对路径。
base: './',
build: {
cssCodeSplit: true,
terserOptions: {
compress: {
keep_infinity: true,
drop_console: true,
},
},
rollupOptions: {
plugins: [],
},
target: "es2015"
},
css: {
postcss: {
plugins: [PostCssPresetEnv(),autoprefixer()],
},
},
})
`
Normal Effect:
![微信图片_20230716120053](https://private-user-images.githubusercontent.com/68363270/253785124-937929ee-c3a9-47df-892b-01ae6f9a3f32.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNTE1NTIsIm5iZiI6MTczOTE1MTI1MiwicGF0aCI6Ii82ODM2MzI3MC8yNTM3ODUxMjQtOTM3OTI5ZWUtYzNhOS00N2RmLTg5MmItMDFhZTZmOWEzZjMyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDAxMzQxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBhMWM2Njg3ZTAzNDI3MjExNDE5NmY1ZmI5MjUzOTg5YjI3MGU5ZWEyNzcyYWUxYWM2NjliMGI3MzUxMzQ5ZGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.0LCedjziYczXoYldTpE8KDH5A188QgLDCL7fdRd1Qz8)
Safari12:
![微信图片_20230716120058](https://private-user-images.githubusercontent.com/68363270/253785110-3cd249da-cc99-4567-a622-cbdea6b9953e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNTE1NTIsIm5iZiI6MTczOTE1MTI1MiwicGF0aCI6Ii82ODM2MzI3MC8yNTM3ODUxMTAtM2NkMjQ5ZGEtY2M5OS00NTY3LWE2MjItY2JkZWE2Yjk5NTNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDAxMzQxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUwYTliY2M5Yjk0Mjk0N2RkYjdlMzlkMmE5ZjE4MjRkZjQ4ZWUxNjRiOWVmNzJkOTg3OTI0NzdkMjZjZjk3MTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.9-S5mik3dZXfXrS6jwd7jpkr2xnb50MARZ2UrduLcx4)
Beta Was this translation helpful? Give feedback.
All reactions