laravel Vue js:未捕获的语法错误:导入行出现意外标识符

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/40642341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 14:45:37  来源:igfitidea点击:

Vue js: Uncaught SyntaxError: Unexpected identifier at import line

laravelvue.js

提问by Clinton Green

I am trying to use vue plugins but everytime I do I always get an Unexpected Identifier on the import line. Any suggestions?

我正在尝试使用 vue 插件,但每次我这样做时,我总是在导入行上得到一个意外的标识符。有什么建议?

HTML

HTML

<div id="content">
  <h1>@{{ message }}</h1>
  <v-select :value.sync="selected" :options="options"></v-select>
</div>

JS

JS

new Vue({
    el: '#content',
    data: {
    message: 'Hello Worldy'
    },
    import vSelect from "vue-select"
    export default {
        components: {vSelect},
        data() {
          return {
            selected: null,
            options: ['foo','bar','baz']
          }
        }
    }
});

采纳答案by darryn.ten

You can't importfrom where you're trying to

你不能import从你想要的地方

import vSelect from "vue-select"

new Vue({
  el: '#content',
  components: {
    vSelect: vSelect
  }
});

and then do the rest of it inside your component definition

然后在你的组件定义中完成剩下的工作

回答by Oluwatobi Samuel Omisakin

Just in case another person encounter this same error sign in the console when using vue. As for me in my case, the import script was automatically created for one of the components I called in my Laravel blade template (by PhpStorm).

以防万一其他人在使用 vue 时在控制台中遇到同样的错误标志。就我而言,导入脚本是为我在 Laravel 刀片模板(通过 PhpStorm)中调用的组件之一自动创建的。

The importation is recommended to be called in the Js file where the instance of Vueis made, because of the need to compile import syntaxof ES6 to ES5. See: https://medium.com/@thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac

导入建议在Vue制作实例的js文件中调用,因为需要编译import syntaxES6到ES5。请参阅:https: //medium.com/@thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac

Hope this helps someone save some time.

希望这可以帮助某人节省一些时间。

回答by alexius

When you insert tag, which is related to your Vue.js component, in your blade file, PhpStorm indeed like Oluwatobi Samuel Omisakin wrote inserts such code

当你在你的刀片文件中插入与你的 Vue.js 组件相关的标签时,PhpStorm 确实像 Oluwatobi Samuel Omisakin 写的插入这样的代码

     <script>
        import MyComponent from "../../../js/components/myComponent";
        export default {
           components: {MyComponent}
        }
     </script>

in the end of your blade file. And this is brings you error in console. Just delete it and make import in you app.js file.

在刀片文件的末尾。这会给你带来控制台错误。只需删除它并在您的 app.js 文件中导入即可。