Vue -不能在模块之外使用import语句

Question

我正在尝试创建一个表单。这个表单有一个带有vue、axios和sweetalert的package.json。

"dependencies": {
  "axios": "^0.19.0",
  "vue": "^2.6.10",
  "vue-sweetalert2": "^2.1.1"
}

JS是

<script>
  import Vue from 'vue';
  import VueSweetalert2 from 'vue-sweetalert2';
  import VueAxios from 'vue-axios';
  import axios from 'axios';
  import 'sweetalert2/dist/sweetalert2.min.css';
  Vue.use(VueSweetalert2, VueAxios, axios);
  var app = new Vue({
    el: '#app',
    methods: {
      guardar: function () {
        axios
          .get('ENDPONT')
          .then(response => {
            console.log(response);
            Vue.swal('Hello Vue world!!!');

          })
          .catch(function (error) {
            console.log(error);
            Vue.swal('Hello Vue world!!!');
          });
      }
    }
  });
</script>

错误很简单: Return“不能在模块之外使用import语句”。我认为import是错误的，但我是Vue新手，不知道正确的方法是什么。

Answer 1

你正试图在一个普通的脚本标签中使用一个导入语句，你只能用type="module"来做到这一点，但是我怀疑如果你继续沿着这条路走下去，你会遇到许多其他的问题，因为很多库还没有为使用ESM模块而构建。

你最好用https://cli.vuejs.org/生成一个项目，它将创建一个良好的起点，编译你的代码，并将其放在一个/build文件夹中，以便部署到你的虚拟主机上。

Answer 2

require('__path_to_vue.js__')

如果你打算在模块外部使用它

Answer 3

我删除了defer

<script src="{{ asset('js/app.js') }}" defer></script>

而且它工作得很完美