我正在开始一个新的 vue.js 项目,所以我使用 vue-cli 工具搭建了一个新的 webpack 项目(即 vue init webpack
)。
当我浏览生成的文件时,我注意到 src/router/index.js
文件中有以下导入:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
我之前没有在路径中看到 at 符号 (@
)。我怀疑它允许相对路径(也许?),但我想确定我理解它的真正作用。
我尝试在网上四处搜索,但找不到解释(可能是因为搜索“at 符号”或使用文字字符 @
作为搜索条件没有帮助)。
@
在这条路径中做了什么(链接到文档会很棒),这是 es6 的东西吗?一个 webpack 的东西?一个 vue-loader 的东西?
更新
感谢 Felix Kling 为我指出关于同一问题的另一个重复的 stackoverflow 问题/答案。
虽然其他 stackoverflow 帖子上的评论不是这个问题的确切答案(在我的情况下它不是 babel 插件),但它确实为我指明了正确的方向来找到它是什么。
在 vue-cli 为您创建的脚手架中,部分基本 webpack 配置为 .vue 文件设置了别名:
这很有意义,因为它为您提供了来自 src 文件的相对路径和它在导入结束时删除了 .vue
的要求路径(您通常需要)。
感谢您的帮助!
最佳答案
这是通过 Webpack resolve.alias
完成的配置选项,并不特定于 Vue。
In Vue Webpack template , Webpack 配置为将 @/
替换为 src
path :
const path = require('path');
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': path.resolve('src'),
}
},
...
别名用作:
import '@/<path inside src folder>';
关于javascript - 导入路径中的 @ 是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42749973/