vue中import引入模块时路径使用@符号，vue中路由懒加载的@符号

转载已于 2022-04-15 09:21:44 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43131046/article/details/113996949

文章标签：

#ecmascript

于 2022-04-15 09:16:07 首次发布

这篇博客详细介绍了ES6中的模块化机制，包括export和import的使用，并重点讲解了import时的@符号含义。@实际上是在Webpack配置中的alias别名，用于简化模块导入路径。文中以webpack.base.conf.js为例，展示了如何设置alias，使得import时能够快速定位到src目录或其他指定路径。

1、ES6中的重要一个内容就是：模块化
1）、export：
用户对外输出本模块（前端一个js文件可以理解为一个模块，eg：request.js）变量的接口。

2）、import：
用于在一个模块中加载另一个含有 export 接口的模块（这个 js 文件一定要含有 export ）。

3）、而我们在使用 import 导入一个模块的时候通常这样使用：
import util from ‘@/utills/request.js’
或者路由懒加载： component: () => import(’@/views/putong’)

那么这个 @ 到底是个什么意思呢？

2、一切和webpack有关
webpack.base.conf.js 文件有如下代码:

resolve: {
// 自动补全的扩展名
extensions: [’.js’, ‘.vue’, ‘.json’],
// 默认路径代理
// 例如 import Vue from ‘vue’，会自动到 'vue/dist/vue.common.js’中寻找
alias: {
‘@’: resolve(‘src’),
‘@config’: resolve(‘config’),
‘vue$’: ‘vue/dist/vue.common.js’
}
}
————————————————
版权声明：本文为优快云博主「imkaifan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_43131046/article/details/113996949