Vue CLI 生成带有错误的空正文：找不到元素：迁移 vuecli 2>3 后的#app

Posted

技术标签:

【中文标题】Vue CLI 生成带有错误的空正文：找不到元素：迁移 vuecli 2>3 后的#app【英文标题】：Vue CLI generates empty body with error: Cannot find element: #app after migration vuecli 2>3 【发布时间】：2018-08-26 14:38:02 【问题描述】：

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

<!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')

【问题讨论】：

【参考方案1】：

我认为您需要在 DOM 中创建一个位置以进行渲染。在这种情况下，应用程序正在寻找 id 为“app”的元素。

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

【讨论】：

是的，我知道。除了我把这个放在哪里？在 VueCli 3 中不再有 index.html 文件，就像在 VueCli 2 中一样，例如这个：github.com/TomFranssen/iris-vue/blob/master/index.html【参考方案2】：

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

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

【讨论】：

以上是关于Vue CLI 生成带有错误的空正文：找不到元素：迁移 vuecli 2>3 后的#app的主要内容，如果未能解决你的问题，请参考以下文章

通过 Vue CLI 添加 Vuetify 会导致“找不到模块”错误

Vue Cli：npm install 后找不到模块“../package.json”错误

Vue：安装@vue/cli 后找不到命令

如何修复“找不到模块 vue-cli-service.js”？

vue-cli搭建的项目打包之后报“资源路径错误&资源文件找不到“

vue-cli v3 与 node.js firebase 函数，firebase 托管（错误：在函数源目录中找不到 npm 包）