import APP from './app'为什么引入的是app.vue而不是app.js?

Question

学习vue的时候，遇到了这个问题，百度了一份node加载模块的方式规则：

当遇到./路径时，会先查找文件名，紧接着是文件名.js 文件名.json 文件名.node；

照这个规则来说，上面引入app的应该是去找app app.js app.json和app.node，找不到就会直接出错；

这里为什么找的是app.vue文件呢？

初学vue，遇到很多问题，都不太理解，感觉有很多基础知识是自己不太具备的，有没有大佬帮忙看看啊？

Answer 1

resolve.extensions

[string] = ['.wasm', '.mjs', '.js', '.json']

尝试按顺序解析这些后缀名。

如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json'],
  },
};

能够使用户在引入模块时不带扩展：

import File from '../path/to/file';

使用此选项会 覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。

Answer 2

单纯 Node 是这样没错。

但你是用了 Webpack 的呀，vue-cli 对其进行了一些配置的修改，其中有一个 resolve.extensions 配置，可以用来指定导入时可以省略的后缀名，vue-cli 把 .vue 加进去了，所以你才可以省略。

vue-cli 里还封装了一个 Webpack 插件 —— vue-loader，可以将 .vue 文件当做模块来导入导出。