vue3 个人自适应配置方案
``
使用插件 "postcss-pxtorem": "^6.1.0",
postcss.config.cjs 文件配置
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"not ie <= 11", //不考虑IE浏览器
"ff >= 30", //仅新版本用“ff>=30
"> 1%", // 全球统计有超过1%的使用率使用“>1%”;
"last 2 versions", // 所有主流浏览器最近2个版本
],
grid: true, // 开启grid布局的兼容(浏览器IE除外其他都能兼容grid,可以关闭开启)
},
"postcss-pxtorem": {
rootValue: 100, // 设计稿宽度除以 10, 开头大写的Px 不转换 => height: 100Px, 内联样式不转换,需要 / 75 转成 rem
unitPrecision: 2, // 计算结果保留 6 位小数
selectorBlackList: [".el", ".van", ".d-"], // 不进行px转换的选择器,不转换element的标签样式,根据自己项目需求来定义
propList: ["*"], // 可以从px更改为rem的属性 感叹号开头的不转换
replace: true, // 转换成 rem 以后,不保留原来的 px 单位属性
mediaQuery: true, // 允许在媒体查询中转换px。
minPixelValue: 2, // 设置要替换的最小像素值。
exclude: /node_modules/i, // 排除 node_modules 文件(node_modules 内文件禁止转换)
},
},
};
vite 文件配置
import { defineConfig ,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// 打包优化
import viteCompression from 'vite-plugin-compression'
// 按需引入 ui 和图标
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 重点来了,官网是真坑,按需引入的icon不给示例。兜兜转转从按需导入icon的仓库代码里看到了i-ep前缀的写法。
/* <i-ep-edit></i-ep-edit> */
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// 按需引入 vant ui
import { VantResolver } from '@vant/auto-import-resolver';
// 版本提示
import { webUpdateNotice } from '@plugin-web-update-notification/vite'
// 按需自动加载api插件
import AutoImport from "unplugin-auto-import/vite";
function pathResolve(dir) {
return resolve(__dirname, ".", dir);
}
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, __dirname);
console.error('env :>> ',env);
return {
base:env.VITE_BASE,
plugins: [
vue(),
AutoImport({
imports: ["vue", "vue-router"],
resolvers: [
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'Icon',
}),
],
}),
Components({
resolvers: [
ElementPlusResolver({importStyle:"sass"}),
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
}),
VantResolver()
],
}),
Icons({
autoInstall: true,
}),
viteCompression({
threshold: 10240 // 对大于 1mb 的文件进行压缩
}),
webUpdateNotice({
versionType: 'build_timestamp',
notificationProps: {
title: '📢 系统更新',
description: '为了您更好的体验我们升级了系统,请您刷新页面体验最新版本,如需自己刷新,请使用shift加f5进行刷新',
buttonText: '刷新',
dismissButtonText: "忽略",
},
})
],
server: {
host: '0.0.0.0',
proxy: {
'/api': {
// 测试
target: env.VITE_BASE_API,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
},
},
resolve: {
alias: {
'@': pathResolve("src"),
'@components': pathResolve("src/components"),
'@api': pathResolve("src/api"),
'@layout': pathResolve("src/layout"),
'@utils': pathResolve("src/utils"),
}
},
css: {
preprocessorOptions: {
scss: {
// 自动导入定制化样式进行文件覆盖
additionalData: `
@use '@/assets/styles/element.scss' as *;
`,
}
}
}
}
})
css 文件样式
// xs:<768px 响应式栅格数或者属性对象,超小屏,比如手机。例如:{ span: 4, offset: 8 }
// sm:≥768px 响应式栅格数或者属性对象,小屏幕,比如平板。例如:{ span: 4, offset: 8 }
// md:≥992px 响应式栅格数或者属性对象,中等屏幕,比如桌面显示器。例如:{ span: 4, offset: 8 }
// lg:≥1200px 响应式栅格数或者属性对象,大屏幕,比如大桌面显示器。例如:{ span: 4, offset: 8 }
// xl:≥1920px 响应式栅格数或者属性对象,超大屏幕显示器,比如2k屏等。例如:{ span: 4, offset: 8 }
// 类名为:
// hidden-xs-only - 当视口在 xs 尺寸时隐藏
// hidden-sm-only - 当视口在 sm 尺寸时隐藏
// hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
// hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
// hidden-md-only - 当视口在 md 尺寸时隐藏
// hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
// hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
// hidden-lg-only - 当视口在 lg 尺寸时隐藏
// hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
// hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
// hidden-xl-only - 当视口在 xl 尺寸时隐藏
// 手机
/* prettier-ignore */
@media screen and (max-width: 768Px) {
html {
font-size: 1rem!important;
}
body{
background: #FAFAFA !important;
}
}
// mini
/* prettier-ignore */
@media screen and (min-width: 768Px) and (max-width: 992Px) {
html {
font-size: 14Px !important;
}
// 添加卡片
.addcard_box{
width: 9.375rem !important;
.smartScenes_slide_box{
width: 9.375rem !important;
height: 9.375rem !important;
}
}
// 方案设计
.schematicDesign_left_men {
height: 62vh !important;
.products_list {
padding-bottom: 4.6875rem !important;
}
}
//分享
.share {
width: 25rem !important;
.box_img {
height: 12.5rem !important;
}
font-size: .75rem !important;
.ewm_img {
width: 6.25rem !important;
height: 6.25rem !important;
}
}
}
// 平板
/* prettier-ignore */
@media screen and (min-width: 992Px) and (max-width:1200Px) {
html {
font-size: 14Px !important;
}
// 添加卡片
.addcard_box{
width: 9.375rem !important;
.smartScenes_slide_box{
width: 9.375rem !important;
height: 9.375rem !important;
}
}
// 方案设计
.schematicDesign_left_men {
height: 62vh !important;
.products_list {
padding-bottom: 6.875rem !important;
}
}
// 方案设计
.shoppingCartOnTheRight {
max-height: 62vh !important;
.productList{
max-height: 40vh !important;
}
}
//分享
.share {
width: 25rem !important;
.box_img {
height: 12.5rem !important;
}
font-size: .75rem !important;
.ewm_img {
width: 6.25rem !important;
height: 6.25rem !important;
}
}
}
// pc端
/* prettier-ignore */
@media screen and (min-width: 1201Px) and (max-width:1920Px) {
html {
font-size: 18Px !important;
}
.schematicDesign {
font-size: 15Px !important;
}
// 4K
@media screen and (min-width: 1921Px) and (max-width:2560Px) {
html {
font-size: 20Px !important;
}
}
}
// 大屏
/* prettier-ignore */
@media screen and (min-width: 1922Px) {
html {
font-size: 22Px !important;
}
}
// 平板模式才触发
// @media all and (orientation: portrait) {
// .landscape {
// position: absolute;
// transform: rotate(90deg) !important;
// transform-origin: 0% 0% !important;
// width: 100vh;
// height: 100vw;
// top: 0;
// left: 100vw;
// }
// }
// 公共背景
.bg_main {
margin: 1.5rem;
padding: 1.25rem;
background: $fzcAntiWhite;
border-radius: 0.5rem;
}
/* 公共滚动条 */
/* prettier-ignore */
*::-webkit-scrollbar {
width: 4Px;
height: 4Px;
border-radius: 10Px;
}
*::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #dddee0;
}
*::-webkit-scrollbar-track {
background-color: #ffffff;
}
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #f4f5f4;
color: #1e1e1e;
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
ul,
ol {
list-style: none;
}
img {
border: none;
vertical-align: middle;
border-radius: 0.5rem;
pointer-events: none;
}
.el-image {
border-radius: 0.5rem;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
input,
textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
.el-tooltip__trigger {
outline: none;
}
//
.pdlr40 {
padding: 0 2.5rem;
}
// h5公共按钮样式
.h5btn {
border-radius: 0.5rem;
padding: 0.9375rem;
color: #fff;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
background: linear-gradient(
135deg,
rgba(94, 160, 247, 1) 0%,
rgba(15, 113, 242, 1) 100%
);
}
/* prettier-ignore */
.plugin-web-update-notice {
position: fixed;
left: 50%;
top: 50%;
user-select: none;
z-index: 99999;
}
/* prettier-ignore */
.plugin-web-update-notice-content-title {
font-weight: 500;
margin: 20Px 0;
font-size: 30Px;
line-height: 24Px;
}
/* prettier-ignore */
.plugin-web-update-notice-content-desc {
font-size: 20Px;
margin-bottom: 20Px;
line-height: 30Px;
}
/* prettier-ignore */
.plugin-web-update-notice-content {
background-color: #fff;
border-radius: 4Px;
color: #000000d9;
box-shadow: 0 3Px 6Px -4Px #0000001f, 0 6px 16Px #00000014, 0 9Px 28Px 8Px #0000000d;
padding: 8Px 16Px;
line-height: 1.5715;
width: 400Px;
position: fixed;
top: 20%;
right: 40%;
}
/* prettier-ignore */
.plugin-web-update-notice-btn {
font-size: 16Px !important;
}