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