Chrome低版本报错
# Chrome低版本报错
Chrome控制台报错：
Uncaught SyntaxError: Unexpected token .
1
2
2
# 1️⃣ 安装 Babel 转换插件
yarn add -D @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator core-js regenerator-runtime
1
# 2️⃣ 配置 babel.config.js
在项目根目录的 babel.config.js 里加入这两个插件：
module.exports = {
presets: [
[
'@vue/cli-plugin-babel/preset',
{
useBuiltIns: 'entry', // 按需引入 polyfill
corejs: 3
}
]
],
plugins: [
'@babel/plugin-transform-optional-chaining',
'@babel/plugin-transform-nullish-coalescing-operator'
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 3️⃣ 确认浏览器兼容目标
Vue CLI 的 Babel preset 默认会根据 browserslist 做兼容，你可以检查一下 package.json 里是否有类似：
"browserslist": [
"chrome >= 49",
"ie 11",
"> 0.2%",
"not dead",
"not op_mini all"
]
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3️⃣ 最保险的方法：强制 Babel 转译所有 node_modules
module.exports = {
publicPath: '/',
devServer: {
host: "0.0.0.0",
port: 8811, // 端口号
https: false, // https:{type:Boolean}
open: false, // 配置自动启动浏览器
proxy: {// 配置跨域
'/xx': {
target: 'http://192.168.0.1:8888/', // 要访问的跨域域名
ws: true,
changeOrigin: true,
pathRewrite: {
'^/xx': ''
},
}
}
},
lintOnSave: process.env.NODE_ENV !== 'production' ? 'error' : false,
productionSourceMap: false,
// ✅ 添加 transpileDependencies 以兼容低版本浏览器
transpileDependencies: [
/node_modules/
],
configureWebpack: {
plugins: [new NodePolyfillPlugin()],
resolve: {
alias: {
'vue$': "vue/dist/vue.js",
package: resolve('package.json'),
'@': path.resolve(__dirname, './src'),
},
},
},
// css: {
// loaderOptions: {
// scss: { // 如果配置为"additionalData"无效，请到官网查阅最新配置信息
// additionalData: `@import "~@/styles/utilities/all.scss";`
// }
// }
// },
chainWebpack (config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/svg'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/svg'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end()
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# 修改入口文件 main.js，引入 polyfill
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
编辑 (opens new window)
上次更新: 2025-09-12 17:57:15