Vue3兼容低版本浏览器(ie11,chrome63)

1、插件安装

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

  1. 安装 @vitejs/plugin-legacy 插件 : 确保你已经安装了 @vitejs/plugin-legacy 插件:
  • npm install @vitejs/plugin-legacy --save-dev
  1. 安装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
相关推荐
码事漫谈18 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER38 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia4 小时前
02--CSS基础
前端·css