Vue CLI 2迁移至3后生成空body：报错Cannot find element: #app

嘿，我之前从Vue CLI 2迁到3的时候也踩过一模一样的坑，给你梳理几个靠谱的排查和解决步骤：

1. 先检查public/index.html文件 #

Vue CLI 3把入口HTML文件从原来的static目录移到了public目录下，这是很多迁移用户容易忽略的点。你得确保这个文件的<body>标签里存在<div id="app"></div>，这是Vue实例挂载的核心容器。

给你一个标准的public/index.html示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>你的项目名称</title>
</head>
<body>
  <!-- 这个容器必须存在，否则Vue没法挂载 -->
  <div id="app"></div>
  <!-- 构建后的文件会自动注入到这里 -->
</body>
</html>

2. 确认src/main.js的挂载逻辑正确 #

Vue CLI 3的入口文件还是src/main.js，但你要保证里面的Vue实例正确指向了#app这个容器。正确的挂载代码应该是这样的：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 两种挂载方式二选一都可以
new Vue({
  render: h => h(App)
}).$mount('#app')

// 或者写成：
// new Vue({
//   el: '#app',
//   render: h => h(App)
// })

如果这里的挂载目标写错了，或者漏掉了挂载代码，页面自然不会出现<div id="app">。

3. 排查vue.config.js的自定义配置（如果有） #

如果你在项目根目录新建了vue.config.js来自定义配置，要检查是否误改了页面模板的路径。比如如果用了pages选项，必须确保每个页面的template指向正确的public/index.html：

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html', // 这里不能写错路径
      filename: 'index.html'
    }
  }
}

4. 清理缓存后重新启动项目 #

有时候node_modules的缓存或者构建缓存会导致奇怪的问题，你可以执行以下命令彻底清理后重新安装依赖：

# 删除node_modules和锁文件
rm -rf node_modules
rm package-lock.json
# 重新安装依赖并启动
npm install
npm run serve

5. 检查是否误移/误删了核心文件 #

迁移时很容易不小心把public/index.html删掉或者移到了错误的目录，确认一下这个文件确实在项目根目录的public文件夹下，而不是还留在原来的static目录里。

按照上面的步骤走一遍，基本就能解决页面里没有<div id="app">的问题了。

内容的提问来源于stack exchange，提问作者Tom Franssen