In a Vue CLI project, custom components defined in .vue single-file components within /src/components directory are not transpiled correctly by Babel despite using default Vue CLI configurations. Post-build files still contain ES6+ syntax like const, let, etc., instead of being transpiled to compatible ES5 code.

[NeverCD]

Version

5.0.8

Environment info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Binaries:
    Node: 20.11.1 - D:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.2.4 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (126.0.2592.87)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0
    @vue/babel-helper-vue-transform-on:  1.2.2
    @vue/babel-plugin-jsx:  1.2.2
    @vue/babel-plugin-resolve-type:  1.2.2
    @vue/babel-plugin-transform-vue-jsx:  1.4.0
    @vue/babel-preset-app:  5.0.8
    @vue/babel-preset-jsx:  1.4.0
    @vue/babel-sugar-composition-api-inject-h:  1.4.0
    @vue/babel-sugar-composition-api-render-instance:  1.4.0
    @vue/babel-sugar-functional-vue:  1.4.0
    @vue/babel-sugar-inject-h:  1.4.0
    @vue/babel-sugar-v-model:  1.4.0
    @vue/babel-sugar-v-on:  1.4.0
    @vue/cli-overlay:  5.0.8
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8
    @vue/cli-plugin-router:  5.0.8
    @vue/cli-plugin-vuex:  5.0.8
    @vue/cli-service: ~5.0.0 => 5.0.8
    @vue/cli-shared-utils:  5.0.8
    @vue/compiler-core:  3.4.31
    @vue/compiler-dom:  3.4.31
    @vue/compiler-sfc:  3.4.31 (2.7.16)
    @vue/compiler-ssr:  3.4.31
    @vue/component-compiler-utils:  3.3.0
    @vue/shared:  3.4.31
    @vue/web-component-wrapper:  1.3.0
    vue: ^2.6.14 => 2.7.16
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.4.2 (15.11.1)
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.14 => 2.7.16
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1.Create or locate a Vue single-file component (.vue) under /src/components.
2.Ensure Vue CLI default configurations for Babel (babel.config.js) and webpack (vue.config.js) are correctly set.
3.Include ES6+ syntax such as const, let, etc., within the <script setup> section of the component.
4.Run npm run build or equivalent Vue CLI build command to generate production-ready files.
5.Inspect the generated JavaScript files (.js) within the build output.

What is expected?

All ES6+ syntax within the Vue single-file components should be transpiled to ES5-compatible code, adhering to the Babel and Vue CLI default configurations.

What is actually happening?

Post-build JavaScript files retain ES6+ syntax (const, let, etc.), indicating that Babel may not be correctly transpiling the code as expected.

---

// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: []
};
//
let path = require("path");
const { defineConfig } = require("@vue/cli-service");
const TerserPlugin = require("terser-webpack-plugin");
function resolve(dir) {
return path.join(__dirname, dir);
}

//vue.config.js
module.exports = defineConfig({
transpileDependencies: true,
productionSourceMap: false,
//文件名称不带hash值
filenameHashing: false,
configureWebpack: {
optimization: {
minimize: false,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
format: {
comments: false,
beautify: true,
},
compress: false,
mangle: false,
keep_classnames: true,
keep_fnames: true,
},
extractComments: false, // 是否将注释提取到单独的文件中
}),
],
},
},
chainWebpack: (config) => {
config.resolve.alias.set("@", resolve("src"));
config.resolve.alias.set("@@", resolve("src/components"));
config.resolve.alias.set("@assets", resolve("src/assets"));
config.resolve.alias.set("scss", resolve("src/scss"));

config.module
  .rule("vue")
  .use("vue-loader")
  .loader("vue-loader")
  .tap((options) => {
    // 修改 vue-loader 选项
    return options;
  });

config.module
  .rule("js")
  .test(/\.js$/)
  .use("babel-loader")
  .loader("babel-loader")
  .tap((options) => {
    // 修改 babel-loader 选项
    return options;
  });

},
});