小编典典

导入路径中的 @ 是什么意思?

all

我正在开始一个新的 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导入路径末尾的要求(您通常需要)。

谢谢您的帮助!


阅读 73

收藏
2022-03-28

共1个答案

小编典典

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

在 Vue Webpack 模板中,Webpack
被配置为替换@/srcpath

  const path = require('path');

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

别名用作:

import '@/<path inside src folder>';
2022-03-28