Vue3兼容低版本浏览器（ie11，chrome63）

1、插件安装

为了使你的项目兼容 Chrome 63，你需要确保包含适当的 polyfills 和插件配置。你已经在使用 legacy 插件，但在代码中可能缺少一些配置或插件顺序有问题。以下是几个可能的改进：

安装 @vitejs/plugin-legacy 插件：确保你已经安装了 @vitejs/plugin-legacy 插件：

npm install @vitejs/plugin-legacy --save-dev

安装plugin-babel插件

npm install --save-dev @babel/core @babel/preset-env @rollup/plugin-babel

2、更新配置文件：

确保 @vitejs/plugin-legacy 插件在 vite.config.js 中被正确引入和配置。

复制代码

import { defineConfig, loadEnv } from "vite";
import path from "path";
import createVitePlugins from "./vite/plugins";

import legacy from '@vitejs/plugin-legacy'; 
import babel from '@rollup/plugin-babel';

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
    // 例如 https://www.tianzhu.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.tianzhu.vip/admin/，则设置 baseUrl 为 /admin/。
    base: env.VITE_APP_CONTEXT_PATH,
    // plugins: createVitePlugins(env, command === "build"),
    plugins: [
      createVitePlugins(env, command === "build"),
      legacy({
        targets: ['defaults', 'ie >= 11','chrome 63'],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
        modernPolyfills: true,
        polyfills: [
          'es.object.values',
          'es.object.entries',
          'es.array.includes',
          'es.promise.finally',
          'es.string.includes',
          'es.array.flat-map'
        ]
      })
  ],
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        "~": path.resolve(__dirname, "./"),
        // 设置别名
        "@": path.resolve(__dirname, "./src"),
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    },
    build: {
      chunkSizeWarningLimit: 50000,
    },
    // vite 相关配置
    server: {
      port: 8091,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        "/dev-api": {
          // target: 'http://127.0.0.1:8080',
          target: "http://192.168.2.130:9001/api",
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, ""),
        },
      },
    },
    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: "internal:charset-removal",
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === "charset") {
                  atRule.remove();
                }
              },
            },
          },
        ],
      },
    },
  };
});

3、创建本地babelrc文件

复制代码

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "63"
      },
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}

4、修改package.json构建大小

build构建的时候，可能会出现内存溢出的情况，以下构建调整最大内存大小

复制代码

"scripts": {
    "dev": "vite",
    "build:prod": "node --max_old_space_size=8192 node_modules/vite/bin/vite.js build",
    "preview": "vite preview"
  },

5、打包构建、运行

- npm run build:prod