Vue CLI generates empty body with error: Cannot find element: #app after migration vuecli 2>3

Question

我正在尝试将我的 VueJS 项目从 VueCLI 2 迁移到 3。所有文件都复制到 src 文件夹中。当我尝试使用 npm 运行 serve 在浏览器中查看它时，我得到这个 HTML 没有 <div id="app"> present:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    <link rel="preload" as="script" href="/app.js">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"> 
   <meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-title" content="iris-vue2"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000">
    </head>
    <body>
    <script type="text/javascript" src="/app.js"></script>
    </body>
</html>

控制台报错：

vue.runtime.esm.js?ff9b:587 [Vue warn]: Cannot find element: #app

HTML 从哪里渲染？在之前版本的 VueCLI 中有一个 index.html 文件。现在不见了？

在我的 main.js 中，我在初始化新项目时执行与样板中相同的操作：

new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
}).$mount('#app')

Answer 1

我认为您需要在 DOM 中创建一个位置以便进行渲染。在这种情况下，应用程序正在查找 ID 为 'app'.

的元素

<body>
  <div id="app"></div>
  <script type="text/javascript" src="/app.js"></script>
</body>

Answer 2

我想通了！新的 index.html 不再位于根目录中。在 VueCli 3 中，它位于 /public 文件夹中！

所以我不得不将 /index.html 移动到 /public/index.html.

Vue CLI generates empty body with error: Cannot find element: #app after migration vuecli 2>3

Vue CLI generates empty body with error: Cannot find element: #app after migration vuecli 2>3

html

javascript

vue.js

vue-cli