这个import语句如何工作？

Question

我刚从vue cli下载了一个模板作为
vue init webpack my-project。
在Hello.vue中我看到了这样的import语句。
import Hello from '@/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”即可。

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

Answer 2

如果您正在撰写以下声明：

从＆＃39; @ / components / Hello＆＃39;;

导入Hello

在此声明中 @表示它会将对应包和导入类，变量和方法加载到您的组件中。