使用 babel 来转译 vue 模板而不是 buble

Question

我正在尝试使用，@babel/plugin-proposal-optional-chaining这样我就可以{{ user?.name || 'Oops' }}在我的 vue 模板中做到这一点。我已经将插件添加到我的 babel.config.js，但它仍然出现 vue-loader 错误。经过一番搜索，似乎 vue 使用 buble 而不是 babel 来转换模板标签内的 js。

有没有办法使用 babel 而不是 buble 来转换模板中的 js？

Answer 1

如果您使用的是 webpack，请在 build/webpack..conf.js 上尝试（替换测试匹配的位置并根据您的偏好进行调整）

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        use: [{
          loader: "babel-loader",
          options: { presets: ['es2015'], compact: false }  // Add here your options!
        }]
      },
      ...
    ]
    ...
  }
  ...
}

也许你必须使用文件 .babelrc 安装和配置 babel 来添加提案和 babel-loader

如果不是 webpack，请添加有关您的项目结构以及编译/转换它的方式的更多信息（或迁移到 webpack，是转换的好朋友）。

另外，如果您需要更多帮助，请告诉我。

希望它至少有一点帮助:)