我正在构建flask应用程序和jinja2模板。因此，我打算根据自己的需求使用Vue功能，而不打算使用单页应用程序。
我正在尝试使用vue轮播，但无法导入它。
这是我的索引HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet"
href="{{ url_for('static', filename='node_modules/materialize-css/dist/css/materialize.min.css')}}"
media="screen,projection" />
<!--Import custom css-->
<link type="text/css" rel="stylesheet"
href="{{ url_for('static', filename='css/landing-page-style.css')}}" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header class="landing-page-header">
<div class="primary-overlay">
<!--Nav Bar-->
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<a href="#home" class="brand-logo">artext</a>
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#home" id="login"><i class="small material-icons left">login</i>Login</a>
</li>
<li>
<a href="#home"><i class="medium material-icons left">how_to_reg</i>Register</a>
</li>
<li>
<a href="#home" id="home"><i class="medium material-icons left">home</i>Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Side Nav-->
<ul class="side-nav" id="mobile-nav">
<li>
<a href="#home"><i class="material-icons left">login</i>Login</a>
</li>
<li>
<a href="#home"><i class="material-icons left">how_to_reg</i>Register</a>
</li>
<li>
<a href="#home"><i class="material-icons left">home</i>Home</a>
</li>
</ul>
<div id="app">
<carousel :data="data"></carousel>
</div>
<section class="slider" id="slider">
<ul class="slides transparent">
<li>
<div class="caption center-align">
<h2>Take Your Dream Vacation</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Veniam non illo earum cumque id est!</h5>
<a href="#" class="btn btn-large">Learn More</a>
</div>
</li>
<li>
<div class="caption left-align">
<h2>We Work With All Budgets</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Veniam non illo earum cumque id est!</h5>
<a href="#" class="btn btn-large">Learn More</a>
</div>
</li>
<li>
<div class="caption right-align">
<h2>Group & Individual Getaways</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
consectetur
adipisicing elit. Veniam non illo earum cumque id est!</h5>
<a href="#" class="btn btn-large">Learn More</a>
</div>
</li>
</ul>
</section>
</div>
</header>
<!--Import jQuery before materialize.js-->
<script type="text/javascript"
src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js')}}"></script>
<!--Import materialize.js-->
<script type="text/javascript"
src="{{ url_for('static', filename='node_modules/materialize-css/dist/js/materialize.min.js')}}"></script>
<!--Import app-custom.js-->
<script type="text/javascript"
src="{{ url_for('static', filename='js/landing-page-js.js')}}"></script>
<!--Import vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="{{ url_for('static', filename='node_modules/vue-carousel/dist/vue-carousel.min.js')}}"></script>
<script type="module">
import Carousel from '/static/node_modules/vue-carousel/src/Carousel.vue';
var app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data() {
return {
data: [
'<div class="example-slide">Slide 1</div>',
'<div class="example-slide">Slide 2</div>',
'<div class="example-slide">Slide 3</div>',
],
}
},
})
</script>
</body>
</html>
我正在使用npm安装该组件。在静态文件夹中，我保留了所有模块。
在运行应用程序时出现以下错误。
Loading module from “http://127.0.0.1:6009/static/node_modules/vue-carousel/src/Carousel.vue” was blocked because of a disallowed MIME type (“application/octet-stream”).
任何帮助。
答案 0 :(得分：1)
我认为JavaScript模块仅允许使用JavaScript MIME类型，例如text/javascript，这就是阻止您的vue文件的原因。请参见JavaScript modules中的注释部分。
您可以尝试加载另一个文件，例如index.js或手动设置Content-Type标头。该错误应该消失了，但是您可能会遇到另一个错误。
您不能仅导入vue文件，因为它不是普通的JavaScript文件。 vue文件必须由Webpack（Vue加载程序）解析，该Webpack会生成多个JavaScript文件。
因此，如果您不想使用Webpack，则必须使用dist目录中的文件（已经解析/构建）（可能与其他软件包不同）或CDN中的文件，例如unpkg.com或{{3 }}。
您可以从其jsdelivr中了解如何使用CDN。请参阅JSFiddle中的资源部分。