兼容低版本浏览器工程化方案

明确需要兼容的浏览器内核范围

在package.json中配置

"browserslist": [
  "> 1%",
  "last 2 versions",
  "chrome >= 77",
  "not dead"
],

其中 chrome >= 77表示谷歌内核需大于等于77版本;

not dead表示被废弃的浏览器，比如ie；

此时在终端执行 npx browserslist可以看到所有涵盖的浏览器列表

npx browserslist
and_chr 125
and_ff 126
and_qq 14.9
and_uc 15.5
android 125
chrome 126
chrome 125
chrome 124
chrome 123
chrome 122
chrome 121
chrome 120
chrome 119
chrome 118
chrome 117
chrome 116
chrome 115
chrome 114
chrome 113
chrome 112
chrome 111
chrome 110
chrome 109
chrome 108
chrome 107
chrome 106
chrome 105
chrome 104
chrome 103
chrome 102
chrome 101
chrome 100
chrome 99
chrome 98
chrome 97
chrome 96
chrome 95
chrome 94
chrome 93
chrome 92
chrome 91
chrome 90
chrome 89
chrome 88
chrome 87
chrome 86
chrome 85
chrome 84
chrome 83
chrome 81
chrome 80
chrome 79
chrome 78
chrome 77
edge 125
edge 124
firefox 127
firefox 126
ios_saf 17.5
ios_saf 17.4
ios_saf 16.6-16.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 110
opera 109
safari 17.5
safari 17.4
samsung 25
samsung 24

工程化方案

基于@vue/cli ^5.0.8

vuecli 内部封装了 @babel/preset-env 和 Autoprefixer

配置项目文件babel.config.js

let presets=[
  [
    "@vue/babel-preset-app",
    {
      // targets：{} //默认情况下使用browserslist，亦可根据目标环境动态配置浏览器范围
      // jsx: { compositionAPI: true },  //项目内用到jsx可开启此选项
    },
  ],
];

module.exports = {
  presets,
};

注意点

• 开发环境可不开启babel转译，提升编译速度。
• 依赖包中的代码未转译，例如 @stomp/stompjs

默认情况下 babel-loader 会忽略所有 node_modules 中的文件，可配置vue.config.js中的 transpileDependencies

transpileDependencies:['@stomp/stompjs']
//true 所有的依赖都进行转译可能会降低构建速度。
如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。

• 如果打完的包都被转义为commonjs，请排查环境变量是否配置VUE_CLI_BABEL_TRANSPILE_MODULES=true

浏览器端无法识别commonjs语法，删除此环境变量即可