javascript - 这个导入语句是如何工作的？

Question

我刚刚从 vue cli 下载了一个模板
vue init webpack my-project.
在 Hello.vue 中，我看到了这样的导入语句。
从'@/components/Hello'导入你好;

我很好奇 @ 做了什么。它被用在很多地方，但没有具体说明它的用途。如果有人可以解释它的作用会很棒吗？它与普通进口有何不同？

Answer 1

如果你在 webpack.base.config.js 的项目中查看 vue-cli 创建的 webpack 模板，你可以看到有一个别名集:

'@': resolve('src')

参见:https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js

第 27 行。

所以只是为了更容易加载模块。因此，您不需要键入诸如 import 'component from '../../../src/components' 之类的内容，您只需键入“@/components”即可。

所以它只是为了方便。与常规导入在功能上没有区别。