【发布时间】：2020-09-14 21:41:49
【问题描述】：
我正在构建一个烧瓶应用程序和 jinja2 模板。因此，我计划按照我的要求使用 Vue 功能，而不是计划单页应用程序。
我正在尝试使用 vue-carousel 但无法导入。
这是我的索引 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”).
任何帮助。
【问题讨论】：