Vue JS 错误，请求的模块未提供名为“createApp”的导出

Question

我写了 hello world vue js 3 简单程序。然后它给出以下错误。我想将 vue 属性值传递给 HTML 值。但这不起作用。请帮我解决这个问题。

package.json

{
  "name": "myfirstproject",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vite": "^2.7.2",
    "vue": "^2.6.14"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>Hello world {{msg}}</h1>
    </div>
    <script type="module">
        import { createApp } from 'vue/dist/vue.esm.browser'

        const app = createApp({
            data(){
                return {
                    msg: "Sri Lanka"
                }
            },
        }).mount('#app');

    </script>
</body>
</html>

Answer 1

我编辑了

package.json

，添加

 "vue": "^3.2.26"

，然后删除node_modules并运行

yarn install

，

那么问题就解决了

Answer 2

您遇到的错误与项目中的 Vue.js 以及您尝试导入它的方式之间的版本不匹配有关。

以下是更新代码以使用 Vue.js 3 的方法：

更新您的
```
package.json
```
以使用 Vue.js 3:

{
  "name": "myfirstproject",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vite": "^2.7.2",
    "vue": "^3.3.4" // Updated Vue.js version
  }
}

击中

npm install

更新您的
```
index.html
```
以导入 Vue.js 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>Hello world {{ msg }}</h1>
    </div>
    <script type="module">
        import { createApp } from 'vue'

        const app = createApp({
            data() {
                return {
                    msg: "Sri Lanka"
                }
            },
        })

        app.mount('#app');
    </script>
</body>
</html>

通过这些更改，您将使用 Vue.js 3，并且不会再遇到与

createApp

导出相关的错误。

Vue JS 错误，请求的模块未提供名为“createApp”的导出

问题描述投票：0回答：2

2个回答

最新问题

Vue JS 错误，请求的模块未提供名为“createApp”的导出

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2