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: '

标签：pathResolve,vue,src,配置,适应,api,vue3,import,vite	

From： https://www.cnblogs.com/zxh-bug/p/18174713