... Vue.js中的mapState SyntaxError，带有vuex

Question

当我在vue.js中使用...mapState时，我在使用webpack捆绑文件时遇到了错误。错误是

  

模块构建失败：SyntaxError：意外的令牌。

我尝试了各种babel插件，例如stage-0和transform-object-rest-spread。

然而，似乎没有人对我好。请你好好告诉我如何解决它？

源代码是

<script type="text/babel">

    import { mapState } from 'vuex';


    let [a, b, ...other] = [1,2,3,5,7,9]; // this line is ok

    console.log(a);

    console.log(b);

    console.log(other); 

    export default{

        computed:{

            localComputed(){

                return 10;

            },

            ...mapState({ //this line caused the error

                count: state => state.count

            })

        },

        methods: {
            increment() {
                this.$store.commit('increment');
            },
            decrement() {
                this.$store.commit('decrement');
            }
        }
    }
</script>

，这是webpack配置片段

{
    test: /\.(js|es|es6|jsx)$/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                presets: [
                    ['react'],
                    ['es2015', {modules: false, loose: true}],
                    ['stage-2']
                ],
                plugins: [
                    ['transform-runtime'],
                    // https://github.com/JeffreyWay/laravel-mix/issues/76
                    ['transform-object-rest-spread'],
                    ['transform-es2015-destructuring']
                ],
                comments: false,
                cacheDirectory: true
            }
        },
        {
            loader: 'eslint-loader',
            options: {
                configFile: eslintConfigPath
            }
        }
    ],
    exclude: excludeReg
}

Answer 1

前一段时间我遇到过类似的问题。据我所知，你的问题是你的babel-loader当前不能处理.vue个文件（这是正确的）。

处理vue-loader文件的.vue也在内部使用babel，但它不会使用webpack的babel-loader配置。在babel中为vue-loader提供配置的最简单方法是（不幸的是）在项目的根文件夹中使用您的babel配置创建单独的.babelrc文件：

<强> .babelrc

{
    presets: [
        ["react"],
        ["es2015", { "modules": false, "loose": true}],
        ["stage-2"]
    ],
    plugins: [
        ["transform-runtime"],
        ["transform-object-rest-spread"],
        ["transform-es2015-destructuring"]
    ]
}

请注意，.babelrc需要有效的JSON。