低安卓版本页面空白适配

发布于:2024-08-18 ⋅ 阅读:(128) ⋅ 点赞:(0)

原因 :无法适配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

在这里插入代码片

网站公告

今日签到

点亮在社区的每一天
去签到