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>

错误很简单：返回“不能在模块外使用导入语句”。我想导入是错误的，但我是 Vue 的新手，不知道什么是正确的方法。

原文由 El Hombre Sin Nombre 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在尝试在普通脚本标记中使用 import 语句，您只能使用 type="module" 来做到这一点，但我怀疑如果您继续沿着这条路走下去，您会遇到许多其他问题，因为许多库都没有构建用于 ESM 模块。

您最好使用 https://cli.vuejs.org/ 生成一个项目，这将创建一个良好的起始基础并编译您的代码并将其放入 /build 文件夹中供您部署到您的虚拟主机。

原文由 Dominic 发布，翻译遵循 CC BY-SA 4.0 许可协议