javascript - 在 django 模板中使用来自 node_modules 的 vuelidate

Question

我使用 Vue 来使用 API，但从未在 Django 模板中使用过。我想使用该Vuelidate包进行表单验证，但在导入validationMixin他们的文档中指定时遇到了一些问题：import { validationMixin } from 'vuelidate'.

我目前正在从 CDN 导入 Vue.js。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

我正在将 vuelidate 的路径添加到我的静态文件中。

# settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'staticfiles')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, 'node_modules', 'vuelidate', 'dist'),
]

当我的 Django 模板被加载时，我得到SyntaxError: import declarations may only appear at top level of a module(Firefox) 和Uncaught SyntaxError: Unexpected token {(Chrome)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module" src="{% static 'vuelidate.min.js' %}"></script>
<script>
    import { validationMixin } from 'vuelidate'
    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            test: 'Hello'
        }
    })
</script>

我添加type="module"到脚本标签，但结果是TypeError: Error resolving module specifier: vuelidate（Firefox）和Uncaught TypeError: Failed to resolve module specifier "vuelidate". Relative references must start with either "/", "./", or "../".（Chrome）

我在这里想念什么？

标签： javascriptdjangovue.js