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
相关推荐
开心工作室_kaic9 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿28 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript