如何理解 Vue 项目中如下 webpack 错误提示？

Question

是这样的，Vue的单文件组件看上去很好用的样子，粗浅学习过后就开始了动手写，然后遇到了个问题，原本有一个App.vue文件，然后我又写了个Content.vue,ContentHead.vue,又写了个ContentView.vue放入到ContentHead.vue里面，再把这个Content.vue放入到App.vue里，在开发环境下，浏览器控制台的热更新报错如下：

这段错误全是英文，内容又多又乱，不知道该怎么看错误提示，该如何解决问题，请指教。谢谢！

Answer 1

首先这段错误提示是 webpack 打包反馈，并由热更新推送到浏览器控制台的。

提示第一行的意思是，在调用 babel-loader 时出错了，并且显示了错误发生在 ./src/components/ContentHead.vue 文件中，babel-loader 主要是处理 ES6 特殊语法的，一般是 import、箭头函数、解构……等新特性的转译。

提示第二行是错误内容，提示讲得很清楚：Module not found，如果你确信文件确实存在的话，那一般问题出在拼写或者路径上。

这段提示的具体意思是在 path/to/src/components/ 目录下无法解析 /src/components/ContentView.vue，显然你的 ContentView.vue 也在 path/to/src/components/ 这个目录下，因此在
path/to/src/components/ContentHead.vue 组件中，import 语句写成 ./ContentView.vue 就 OK 了，如果在 webpack 配置中，src 目录有别名 @，你还可以写成 @/components/ContentHead.vue，顺便理解一下别名的含义。

因此你需要理解 CommonJS 规范中模块定位的原理，以及 webpack 中的一些配置知识。

欢迎参与学习 Vue 你需要知道的 webpack 知识讲座，讲座已成功上线，报名即可立即回看。

本讲座自 2017 年 7 月 11 日起一年内的收入捐给此轻松筹项目受助人。

Answer 2

检查模块引入的路径，报错里面提示了Module not found，一般就是引入的文件路径不对。