part of the problem
UC browser does not fully support RGB, such as rgb(0 0 0 /30%). This writing method does not support
tailwindcss v3, and some styles in lower versions do not support
UC browser. Tailwindcss boxShadow does not support the main reason is RGB.
Compatible with directly posting code
Use tailwindcss @2.2.16 version v3 and lower versions do not support
the jit mode of tailwindcss v2 and the arbitrary value syntax is good enough.
The browser import() support level is as follows https://caniuse.com/es6-module-dynamic- import@vitejs/plugin-legacy ; It can be compatible with the plug-in provided by vite, but it will not work if
vue3 uses the proxy plug-in. For example, ie11 does not support proxy and can only use vue2 . The browser import() support level is as follows https://caniuse.com/?search=proxy@vitejs/plugin-legacy
Install
npm install -D @vitejs/plugin-legacy
npm install -D terser
use
After npm build is packaged, lower version browsers can open it.
In development mode, vite will not edit and process @vitejs/plugin-legacy
, and lower version browsers do not support native esm, so it is still blank.
Native esm browser support https://caniuse.com/?search=ESM% 20
As shown in the figure below, chrome<60, Edge<15, Firefox<59 do not support native ESM
package.json file
{
"name": "vue-project",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite --host",
"build": "run-p type-check build-only",
"preview": "vite preview",
"test:unit": "vitest --environment jsdom --root src/",
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"axios": "^1.2.1",
"dayjs": "^1.11.7",
"element-plus": "^2.2.27",
"pinia": "^2.0.28",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.1.4",
"@types/jsdom": "^20.0.1",
"@types/node": "^18.11.12",
"@vitejs/plugin-legacy": "^3.0.1",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
"@vue/test-utils": "^2.2.6",
"@vue/tsconfig": "^0.1.3",
"autoprefixer": "^10.4.13",
"cypress": "^12.0.2",
"eslint": "^8.22.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-vue": "^9.3.0",
"jsdom": "^20.0.3",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.20",
"prettier": "^2.7.1",
"sass": "^1.32.8",
"sass-loader": "10.1.1",
"start-server-and-test": "^1.15.2",
"tailwindcss": "^2.2.16",
"terser": "^5.16.1",
"typescript": "~4.7.4",
"unplugin-auto-import": "^0.12.1",
"unplugin-vue-components": "^0.22.12",
"vite": "^4.0.0",
"vitest": "^0.25.6",
"vue-tsc": "^1.0.12"
}
}
vite.config.ts file
import {
fileURLToPath, URL } from "node:url"
import {
defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import {
ElementPlusResolver } from "unplugin-vue-components/resolvers"
import legacy from "@vitejs/plugin-legacy"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
legacy({
polyfills: ["es.promise.finally", "es/map", "es/set"],
targets: ["chrome<60"],
modernPolyfills: ["es.promise.finally"],
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
})
tailwindcss content
Install
The lower version needs to install [email protected] version
npm install -D tailwindcss@2.2.16 postcss@latest autoprefixer@latest
For details, refer to tailwindcss Chinese website to install Tailwind CSS in Vue 3 and Vite
postcss.config.js file
module.exports = {
plugins: {
tailwindcss: {
},
autoprefixer: {
},
},
}
The redundant content of tailwind.config.js file v2 is deleted by itself
// module.exports = {
// purge: [],
// darkMode: false, // or 'media' or 'class'
// theme: {
// extend: {},
// },
// variants: {
// extend: {},
// },
// plugins: [],
// }
/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
// 不能 import es模式引入 colors 这样 同一文件出现import与 module.exports 会报错
// import _colors from "./src/assets/tailwind/colors";
// 添加自定义样式
// eslint-disable-next-line no-undef
const myPlugin = require("./src/assets/tailwind/tailwindcssPlugin")
// eslint-disable-next-line no-undef
const _colors = require("./src/assets/tailwind/colors")
// eslint-disable-next-line no-undef
module.exports = {
mode: "jit",
// content: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
// 禁用
corePlugins: {
// boxShadow 在低版本浏览器 tailwindcss生成的代码不能使用
// 该方式 低版本浏览器不支持
// box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
boxShadow: false,
},
theme: {
extend: {
},
colors: ({
colors }) => {
let newColors = colors
// delete newColors.lightBlue
// delete newColors.warmGray
// delete newColors.trueGray
// delete newColors.coolGray
// delete newColors.blueGray
return {
...newColors,
..._colors,
}
},
// boxShadow: ({ boxShadow }) => {
// return {
// ...boxShadow,
// outer_1: "0 2px 8px 0 rgba(0,0,0,0.3)",
// }
// },
},
plugins: [myPlugin],
}
The tailwind.config.js file v3 is not compatible with lower versions
/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
// 不能 import es模式引入 colors 这样 同一文件出现import与 module.exports 会报错
// import _colors from "./src/assets/tailwind/colors";
// eslint-disable-next-line no-undef
const _colors = require("./src/assets/tailwind/colors")
// eslint-disable-next-line no-undef
module.exports = {
content: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
theme: {
extend: {
},
colors: ({
colors }) => {
let newColors = colors
delete newColors.lightBlue
delete newColors.warmGray
delete newColors.trueGray
delete newColors.coolGray
delete newColors.blueGray
return {
...newColors,
..._colors,
}
},
boxShadow: ({
boxShadow }) => {
return {
...boxShadow,
outer_1: "0 2px 8px 0 rgb(0 0 0 / 30%)",
}
},
},
plugins: [],
}
Effect
The preview effect of the uc browser is blank in the unpackaged dev development mode
The preview effect of the packaged file in uc browser is displayed normally
Google browser effect of high version Chrome kernel in unpackaged dev development mode
