尝试使用 CDN 中的 Vue.js 库，但出现 Uncaught SyntaxError: Unexpected identifier
Posted
技术标签:
【中文标题】尝试使用 CDN 中的 Vue.js 库，但出现 Uncaught SyntaxError: Unexpected identifier【英文标题】：Trying to use Vue.js library from CDN but I get Uncaught SyntaxError: Unexpected identifier 【发布时间】：2019-01-05 23:36:49 【问题描述】：我使用 Django 作为后端，我想使用 Vue.js 库作为前端。我将它们包含在 CDN 中。问题是脚本的第一行总是得到错误 Uncaught SyntaxError: Unexpected identifier。我怀疑这是因为导入，但我不知道如何使用该库。有任何想法吗？提前致谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>
</head>
<body>
<ul class="sidebar-nav">
<p>sidebar</p>
<li><a href="/profile/">pepe14</a></li>
<li><a href="/accounts/logout/?next=/submit/">Logout</a></li>
</ul>
<template>
<div>
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</div>
</template>
<script>
import VueTagsInput from '@johmun/vue-tags-input';
export default
components:
VueTagsInput,
,
data()
return
tag: '',
tags: [],
;
,
;
</script>
<form action="" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
<table>
<tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
<tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
</textarea></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
</table>
<input type="submit" value="Submit" />
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：由于您同时使用从 CDN 输入的 Vue 和 vue 标签，因此您不能依赖导入/导出。 所以，首先你需要从你的代码中删除它们：
import VueTagsInput from '@johmun/vue-tags-input';
和
export default
用于 Vue 组件。
最重要的是，如果 vue 标签输入工作，你的 Vue 组件代码将无法工作：
<template>
<script>
<style>
Vue 单文件组件的语法不能立即在浏览器中使用。此外，您没有从任何 Vue 实例导入/渲染组件，因此，即使组件和 vue 标签输入都有效，html 页面中也不会出现任何内容。
为了使事情正常工作，您需要两件事：
声明一个 Vue 实例并将其安装在一个带有el 属性的 html 标记中。我选择 #element 作为标签 ID。
将 vue 标签输入 html 代码粘贴到该 HTML 中。
以下修改后的 sn-p 就可以了：
<title>title</title>
<link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>
</head>
<body>
<ul class="sidebar-nav">
<p>sidebar</p>
<li><a href="/profile/">pepe14</a></li>
<li><a href="/accounts/logout/?next=/submit/">Logout</a></li>
</ul>
<div id="element">
<vue-tags-input
v-model="tag"
:tags="tags"
@tags-changed="newTags => tags = newTags"
/>
</div>
<form action="" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
<table>
<tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
<tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
</textarea></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
</table>
<input type="submit" value="Submit" />
</form>
<script>
new Vue(
el: '#element',
data:
tag: '',
tags: [],
,
);
</script>
</body>
</html>
由于 vue 标签输入自动加载到 window，当您从 cdn 导入它时，您不需要在 Vue 实例中导入/引用该组件。
【讨论】：
谢谢！那解决了它。你知道我怎样才能做到这一点，而不是作为一个单独的表单出现，而是从模板修改现有表单来做到这一点？ 我想您应该将表单和 vue 标签相关代码都注册为组件，然后将它们作为标签呈现在您的主 vue 实例中。虽然大多数关于 vue 组件的示例和教程都假设您将使用单文件组件和 babel，但有关 vue 组件的官方文档仍然假设您只是在浏览器中使用 Vue，没有构建步骤，所以它们应该会有很大帮助：vuejs.org/v2/guide/components.html以上是关于尝试使用 CDN 中的 Vue.js 库，但出现 Uncaught SyntaxError: Unexpected identifier的主要内容，如果未能解决你的问题，请参考以下文章