我正在尝试使用 options api 运行简单的 vue3 应用程序。这是代码： 索引.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">
</div>
<!---->
<script type="module" src="main.js"></script>
</body>
</html>
main.js：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
应用程序.vue：
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
但是在浏览器中出现此错误（我尝试在 apache 中为 vue 设置不同的 mimetypes：text/html、text/javascript、模块）：
无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
注意：如果我不使用 vue 文件而只是在 main.js 中编写应用程序代码，它就可以正常工作：
const app = createApp({
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
})
app.mount('#app')
我做错了什么？希望能澄清这个问题。谢谢。
我的理解是，您需要一个构建步骤才能成功渲染
*.vue