低安卓版本页面空白适配

原因 :无法适配e6语法
vue config

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const IS_PRODUCTION = process.env.NODE_ENV === "production";
function resolve(dir) {
  // join(__dirname) 设置绝对路径。 dirname代表当前所在文件路径
  return path.join(__dirname, dir);
}
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
//第三方包转义es6
  transpileDependencies: true,
  publicPath: "/",
  // assetsPublicPath:'./',

  lintOnSave: false,
  devServer: {
    open: true,
    hot: true,
    client: {
      overlay: false,
    },
    proxy: {
      //   // IFrame模块1
      //   "^/modular1": {
      //     target: "http://ip:端口/",
      //     changeOrigin: true,
      //   },
      "/h5": {
        target: proxyUrl[process.env.VUE_APP_MODE], // 'https://tz-uw-acm.dexintec.cn'
        logLevel: "debug",
        onProxyRes(proxyRes, req, res) {
          const realUrl = new URL(
            req.url || "",
            proxyUrl[process.env.VUE_APP_MODE] || ""
          );
          proxyRes.headers["x-real-url"] = realUrl;
        },
      },
      "/cbs": {
        target: proxyUrl[process.env.VUE_APP_MODE], // 'https://tz-uw-acm.dexintec.cn'
        logLevel: "debug",
        onProxyRes(proxyRes, req, res) {
          const realUrl = new URL(
            req.url || "",
            proxyUrl[process.env.VUE_APP_MODE] || ""
          );
          proxyRes.headers["x-real-url"] = realUrl;
        },
      },
    },
  },
  // module: {
  //   rules: [
  //     {
  //       test: /\.js$/,
  //       use: {
  //         loader: "babel-loader",
  //         options: {
  //           presets: ["@babel/preset-env"], // 也可以写成presets:['babel-preset-env']
  //         },
  //       },
  //       exclude: "/node_modules/",
  //     },
  //   ],
  // },

  //核心代码
  configureWebpack: (config) => {
    if (IS_PRODUCTION) {
      // 为生产环境修改配置...
      config.mode = "production";
      config["performance"] = {
        //打包文件大小配置
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000,
      };
      //生产环境去除console
      if (process.env.VUE_APP_MODE === "production") {
        config.optimization.minimizer[0].options.minimizer.options.compress =
          Object.assign(
            config.optimization.minimizer[0].options.minimizer.options.compress,
            {
              drop_console: true,
            }
          );
      }

      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, //匹配文件名
            threshold: 10240, //对超过10k的数据压缩
            deleteOriginalAssets: false, //不删除源文件
          }),
        ],
      };
    } else {
      config.devtool = "eval-source-map";
    }
    // config.plugins.delete("prefetch");
  },
  chainWebpack: (config) => {
    config.entry.app = ["babel-polyfill", "./src/main.js"];
    config.resolve.alias
      .set("components", resolve("src/components"))
      .set("views", resolve("src/views"))
      .set("assets", resolve("src/assets"))
      .set("common", resolve("src/common"));

    // 删除 prefetch 选项:  预加载

    config.plugins.delete("prefetch");
    if (process.env.use_analyzer) {
      // 分析
      config
        .plugin("webpack-bundle-analyzer")
        .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
    }
    if (IS_PRODUCTION) {
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: {
            progressive: true,
            quality: 50,
          },
          optipng: {
            enabled: true,
          },
          pngquant: {
            quality: [0.5, 0.65],
            speed: 4,
          },
          gifsicle: {
            interlaced: false,
          },
        })
        .end();
    }
  },
  css: {
    //查看CSS属于哪个css文件
    sourceMap: process.env.NODE_ENV === "production" ? false : true,
    loaderOptions: {
      scss: {
        // additionalData: `@import '@/assets/styles/variables.scss';`,
        additionalData: (content, loaderContext) => {
          const { resourcePath } = loaderContext;
          if (resourcePath.endsWith("global.scss")) return content;
          return `@import "@/global.scss"; 
          ${content}`;
        },
      },
    },
    extract: false,
  },
  productionSourceMap: false,
});

在这里插入代码片

bable config

  presets: [
    [
      "@vue/app",
      {
        useBuiltIns: "entry",
        polyfills: ["es6.promise", "es6.symbol"],
      },
    ],
  ],
};

在这里插入代码片

.browserslistrc

not dead
not ie <= 8
"not op_mini all"
ChromeAndroid > 30
Chrome > 30
Android > 4
cover 100% in NG

在这里插入代码片
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android是一个开源的移动操作系统,由Google开发。它的各个版本都有不同的特性和适配要求。下面是Android各个版本适配情况: 1. Android 1.0:这是Android的首个正式版本,发布于2008年。它主要适配了当时的早期智能手机。 2. Android 1.5 Cupcake:这个版本引入了许多新特性,包括虚拟键盘、文本选择和复制功能等。它的适配要求相对较,可以在较旧的设备上运行。 3. Android 1.6 Donut:这个版本增加了搜索框和快捷方式等功能。它的适配要求与Cupcake相似。 4. Android 2.0/2.1 Eclair:这个版本引入了许多新特性,包括支持多点触控、HTML5视频播放和Live壁纸等。它的适配要求相对较高,需要较新的设备支持。 5. Android 2.2 Froyo:这个版本引入了许多新特性,包括支持移动热点和Adobe Flash等。它的适配要求与Eclair相似。 6. Android 2.3 Gingerbread:这个版本引入了许多新特性,包括支持NFC和下载管理器等。它的适配要求相对较高,需要较新的设备支持。 7. Android 4.0 Ice Cream Sandwich:这个版本引入了许多新特性,包括全新的用户界面和面部解锁等。它的适配要求相对较高,需要较新的设备支持。 8. Android 4.1/4.2/4.3 Jelly Bean:这个版本引入了许多新特性,包括Google Now和通知增强等。它的适配要求与Ice Cream Sandwich相似。 9. Android 4.4 KitKat:这个版本引入了许多新特性,包括透明状态栏和打印支持等。它的适配要求相对较高,需要较新的设备支持。 10. Android 5.0/5.1 Lollipop:这个版本引入了许多新特性,包括Material Design和多用户支持等。它的适配要求相对较高,需要较新的设备支持。 11. Android 6.0 Marshmallow:这个版本引入了许多新特性,包括指纹识别和运行时权限等。它的适配要求相对较高,需要较新的设备支持。 12. Android 7.0/7.1 Nougat:这个版本引入了许多新特性,包括分屏模式和通知增强等。它的适配要求相对较高,需要较新的设备支持。 13. Android 8.0/8.1 Oreo:这个版本引入了许多新特性,包括自适应图标和通知渠道等。它的适配要求相对较高,需要较新的设备支持。 14. Android 9 Pie:这个版本引入了许多新特性,包括手势导航和应用程序切片等。它的适配要求相对较高,需要较新的设备支持。 15. Android 10:这个版本引入了许多新特性,包括暗黑模式和系统级录屏等。它的适配要求相对较高,需要较新的设备支持。 16. Android 11:这个版本引入了许多新特性,包括聊天气泡和无线Android Auto等。它的适配要求相对较高,需要较新的设备支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值