vue3+ts+vant写移动端项目部Android机页面打开空白

前言

　　部分安卓机因为内置webview较老，所以无法识别最新的es6的语法，页面打开空白。解决方式，vite项目就使用@vitejs/plugin-legacy，其他项目可以选择使用@babel/core @babel/cli @babel/preset-env

　　这里主要提vite项目，因为babel项目的相关博客较多，就不再复述。

 

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postcssPxtoRem from "postcss-pxtorem";
import { loadEnv } from "vite";
// import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import viteCompression from "vite-plugin-compression";
import { resolve } from "path";
import legacy from "@vitejs/plugin-legacy";

export default defineConfig(({ mode, command }) => {
  const { VITE_BUILD_NAME } = loadEnv(mode, process.cwd());

  const server: any = {
    host: true, // host设置为true才可以使用network的形式，以ip访问项目
    port: 8080, // 端口号
    strictPort: true, // 如果端口号被占用自动退出
    // https: true,
    proxy: { // 服务器代理配置

    },
    // middleware: [], // 中间件
    hmr: true, // 开启热更新
    open: false, // 自动打开浏览器
    cors: true, // 跨域设置允许
  };

  const useLegacy: any = legacy({
    targets: [
        '> 1%',
        'not ie 11',
        'not op_mini all',
        'chrome >= 78',
        'edge >= 78',
        'firefox >= 72',
        'safari >= 13',
        'opera >= 67',
    ],
  })

  // 服务器代理配置
  // server.proxy[VITE_PROXY_PREFIX] = {
  //   target: VITE_APP_API_URL,
  //   changeOrigin: true,
  //   // rewrite: (path) => path.replace(new RegExp(`^${VITE_DR_PROXY_PREFIX}`), ""),
  // };

  return {
    envPrefix: "", //配置自定义文件字段开头
    base: '/',
    server,
    plugins: [
      vue(),
      // importToCDN({
      //   modules: [
      //     autoComplete("vue"),
      //     {
      //       name: "vant",
      //       var: "vant", // 根据main.ts中定义的来
      //       path: "https://cdn.bootcdn.net/ajax/libs/vant/4.6.8/vant.min.js",
      //       css: "https://cdn.bootcdn.net/ajax/libs/vant/4.6.8/index.min.css",
      //     },
      //   ],
      // }),
      viteCompression({
        verbose: true,
        disable: false,
        deleteOriginFile: false,
        algorithm: "gzip",
        ext: "gz",
      }),
      useLegacy
    ],
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    },
    css: {
      postcss: {
        plugins: [
          postcssPxtoRem({
            rootValue: 16, // 按照自己的设计稿
            unitPrecision: 5, // 保留到5位小数
            selectorBlackList: ["ignore", "tab-bar", "tab-bar-item"], // 忽略转换正则匹配项
            propList: ["*"],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
          }),
        ],
      },
    },
    optimizeDeps: {
      entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式
      exclude: ['vconsole'], // 在预构建中强制排除的依赖项
      include: [], // 可强制预构建链接的包
      keepNames: false, // true 可以在函数和类上保留 name 属性
    },
    build: {
      outDir: VITE_BUILD_NAME
    }
  };
});

　　

　　注意，就算用了语法兼容但是像replaceAll这种语法糖也是不支持的，出了问题用vconsole好好调试。