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

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'
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/113996949