首页 文章

ES6导入使用at('@')使用Webpack登录vue.js项目中的路径

提问于
浏览
144

我正在开始一个新的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 sign"或使用文字字符 @ 没有帮助作为搜索条件) .

@ 在这条路径中做了什么(链接到文档会很棒)这是一个es6的事情吗?一个webpack的东西?一个vue-loader的东西?

更新

感谢Felix Kling指出我关于同一个问题的另一个重复的stackoverflow问题/答案 .

虽然对其他stackoverflow帖子的评论不是这个问题的确切答案(在我的情况下它不是一个babel插件)但它确实指出了我找到它的正确方向 .

在vue-cli为你挑选的脚手架中,基本webpack配置的一部分为.vue文件设置了一个别名:

Alias location within project

这有意义,因为它为您提供了src文件的相对路径,并且在导入路径(您通常需要)的末尾删除了 .vue 的要求 .

谢谢您的帮助!

1 回答

  • 132

    这是通过Webpack resolve.alias配置选项完成的,并不是特定于Vue .

    In Vue Webpack template,Webpack配置为用src path替换 @/

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          ...
          '@': resolve('src'),
        }
      },
      ...
    

相关问题