此导入声明如何工作？

Question

我刚刚从vue cli下载了一个模板
vue init webpack my-project。
和内部Hello.vue我看到一个像这样的导入语句。
import Hello from '@/components/Hello';

我很好奇@是做什么的。它在很多地方使用，但没有写到它究竟做了什么。如果有人能解释它的作用会很好吗？以及它与正常进口有什么不同？

Answer 1

如果你在项目看webpack.base.config.js为模板的WebPack VUE-CLI创建的，你可以看到有一个别名集：

'@': 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

如果您书面方式下面的语句：

进口你好从 '@ /组件/你好';

在这个声明@意味着，它会加载对应的包和导入类，变量和方法到你的组件。