Vue中import引入模块路径时的@符号

最新推荐文章于 2025-07-26 10:10:42 发布

转载最新推荐文章于 2025-07-26 10:10:42 发布 · 740 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/niceyoo/p/10106035.html

文章标签：

#javascript #webpack #ViewUI

本文详细解析了ES6模块导入语法中@符号的含义，揭示其作为路径别名，简化了模块导入路径，同时介绍了webpack配置中如何设置路径别名，使开发者能更高效地组织和引用项目内的模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、ES6 模块主要有两个功能：export 和 import

export：用户对外输出本模块（一个文件可以理解为一个模块，比如 aaa.js bbb.js）变量的接口。

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

而我们在使用 import 导入一个模块的时候通常这样使用：

import util from '@/libs/util'

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

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