programing

...vue.js의 mapState SyntaxError(vuex 사용)

yoursource 2022. 8. 14. 12:37
반응형

...vue.js의 mapState SyntaxError(vuex 사용)

사용할 때...mapStatevue.js에서 웹 팩으로 파일을 번들할 때 오류가 발생했습니다.에러는

모듈 빌드 실패:구문 오류:예기치 않은 토큰입니다.

스테이지 0이나 transform-object-rest-spread 등의 babel 플러그인을 사용해 보았습니다.

하지만, 난 아무 것도 괜찮지 않은 것 같아.어떻게 하면 해결할 수 있는지 말씀해 주시겠습니까?

소스코드는

<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>

이거는 웹 팩 설정 프래그먼트입니다

{
    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
}

저도 얼마 전에 비슷한 문제가 있었어요.내가 볼 때, 당신의 문제는 당신의 babel-loader가 현재 작동하지 않는 것입니다..vue파일(정확한 파일)입니다.

vue-loader를 처리합니다..vue파일, 사용babel내부에서도 마찬가지입니다만, 웹 팩을 사용하지 않습니다.babel-loader설정을 실시합니다.에 대한 구성을 제공하는 가장 쉬운 방법babel에서vue-loader(지속적으로) 다른 것을 만들고 있습니다..babelrc프로젝트의 루트 폴더에 babel 구성을 포함한 파일:

.babelrc

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

주의:.babelrc유효한 JSON이 필요합니다.

언급URL : https://stackoverflow.com/questions/43044864/mapstate-syntaxerror-in-vue-js-with-vuex

반응형