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

躺平瑜洲坑
  • 23

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

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

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

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

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

回复
阅读 2k
2 个回答

单纯 Node 是这样没错。

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

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

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 将不再尝试使用默认扩展来解析模块。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏