Question

在this answer中，建议使用以下语法。

import { mapActions } from 'vuex'
export default {
  vuex: {
    getters: { activeDataRow: state => state.activeDataRow },
    actions: { updateData, resetData }
  },
  methods: { ...mapActions(['updateData', 'resetData']) }
}

我无法正常工作，我收到了错误：

模块构建失败：SyntaxError：C：/.../ navigation.vue：意外的令牌（30：8）

29 |方法：{
    30 | ... mapActions（['updateData'，'resetData']）
       | ^
    31 | }

我已经尝试了configuring Babel to stage-2和adding plugins，但它没有改变。可以做些什么呢？我该如何排除故障？

babel: {
  presets: ["es2015", "stage-2"],
  plugins: ["transform-object-rest-spread"]
}

webpack.config.js

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
      { test: /\.vue$/, loader: 'vue' }]
    },
    babel: {
      presets: ["es2015", "stage-2"],
      plugins: ['transform-runtime']
    },
    resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }
}

Answer 1

这可能是其中一种解决方案。您需要在babel loader代码的配置文件中添加js，如下所示：

module: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue'
    },
    {
      test: /\.js$/,
      loader: 'babel',
      include: projectRoot,
      exclude: /node_modules/
    },
    ...
    ...

以下是我与babel相关的依赖关系：

"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",

您可以在此repo中看到此配置和其他相关代码。

在Vue下WebPack无法识别传播操作符

1 个答案: