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-aliasalias: {// 设置路径"~": 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 filecss: {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
