尝试在 Django 应用程序的 js 文件中导入 vue.js 时出现“未捕获的语法错误：无法在模块外使用 import 语句”

Posted 2023-02-22

【中文标题】尝试在 Django 应用程序的 js 文件中导入 vue.js 时出现“未捕获的语法错误：无法在模块外使用 import 语句”

【英文标题】："Uncaught SyntaxError: Cannot use import statement outside a module" when trying to import vue.js inside js file in Django app

【发布时间】：2020-09-08 12:35:57

【问题描述】：

我开始在一个真正的 django 项目中使用 vue.js，但我已经遇到了一个问题。

我已经在venv环境下安装了npm，并且安装了vue包。

我现在想在 js 文件中创建一个 Vue 对象，所以我使用：

import Vue from 'vue'

但是在控制台中我得到了这个错误

未捕获的语法错误：无法在模块外使用 import 语句

我已经搜索过这个问题，但找不到适合我的具体案例的好答案。

那么如何通过 npm 包继续使用 vue js 呢？

【问题讨论】：

如果该行从<script> 标记用于客户端，则需要将其设置为type="module"，因为这些是允许使用import/export 语句的行，例如<script type="module">

在我的 Django 应用程序中，这个脚本是通过 python 代码在管理部分调用的，所以我没有亲自通过 html 包含 js 文件

好吧，没人知道

【参考方案1】：

我很确定更好，但更难的方法是让 webpack 和 babel 参与进来。然而，对于我的小项目来说，这似乎有点过分了。我让 staticfiles finder 可以看到 node_modules 目录：

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "node_modules"),
)

现在我必须通过 STATIC_URL 访问它们（对我来说是“/static/”）。

import Vue from 'static/dist/vue/vue.js'