Vue 3 createApp 未在 Chrome 中定义

Question

当使用 Vue 3 并且新的 createApp Chrome 无法识别它时。在我的 main.js 中，我有：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

我用一个新生成的 vue-cli 应用进行了测试，但它不起作用。

Chrome Vue devtools 无法识别任何 localhost 应用，并在 Vue 应用内的控制台中输入 Vue 会显示：Uncaught ReferenceError: Vue is not defined at <anonymous>:1:1

Answer 1

有两种方法可以运行使用 Vue CLI 创建的新 Vue 3 项目。

1. 通过运行npm run serve 启动开发服务器并打开浏览器到http://127.0.0.1:8080/。
2. 通过运行npm run build 创建build，然后在浏览器中打开dist/index.html。

如果您想在浏览器控制台中访问您的 Vue 应用程序，您可以执行以下操作：

import { createApp } from 'vue';
import App from './App.vue';


const app = createApp(App);

// now you can see `vueApp` within the browser console
window.vueApp = app;

app.mount('#app');