我有这个自动创建的Vue应用程序,它是从一个命令创建的,并且都链接在一起,但由于某种原因,它没有出现在我的浏览器中。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="application/octet-stream" src="src\main.js"></script>
</body>
</html>
main.js
import { createApp } from 'c:/Users/kmba2/Coding/JavaScript/Tutorials/Vue Framework Tutorial/node_modules/vue/dist/vue'
import App from './App.vue'
import './assets/main.css'
const app = createApp(App)
app.mount('#app')
App.vue
<script type="module" setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
我本以为会在浏览器或代码源中看到一个程式化的"Hello World",但我却在控制台中看到错误消息:
- 不允许加载本地资源:文件:///C:/用户/kmba2/编码/JavaScript/教程/Vue%20框架%20教程/节点模块/vue/dist/vue
- 应用程序版本:1无法加载模块脚本:应为JavaScript模块脚本,但服务器响应的MIME类型为"application/octet-stream"。根据HTML规范,对模块脚本强制执行严格的MIME类型检查。
- main. css:1无法加载模块脚本:应为JavaScript模块脚本,但服务器响应的MIME类型为"text/css"。根据HTML规范,对模块脚本强制执行严格的MIME类型检查。
1条答案
按热度按时间41zrol4v1#
我找到了我的问题的答案。我有一些如何设法不完成模板Vue的官方步骤(我删除了默认模板,再次运行
npm create vue@latest
,这次遵循并理解了后续命令),我的Node.js不是最新的。我应该使用npm run dev
命令,它包含在默认模板Vue应用程序的设置中。