Question

我正在尝试创建一个表单。这种形式具有package.json文件，其中包含vue，axios和sweetalert。

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

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

Answer 1

您正试图在普通脚本标签中使用import语句，只能使用type="module"来执行此操作，但是我怀疑如果继续沿这条路径运行会遇到很多其他问题，因为许多库都没有尚未与ESM模块配合使用。

最好使用https://cli.vuejs.org/生成一个项目，这将创建一个良好的开始基础并编译代码并将其放在/build文件夹中，以供您部署到网络托管中。 / p>

Answer 2

require('__path_to_vue.js__')

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

Answer 3

我从

中删除了 defer

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

效果很好

Vue-无法在模块外部使用import语句

3 个答案: