@ 在导入路径中是什么意思？

IT技术 javascript webpack ecmascript-6 vue.js
2021-01-28 15:45:44

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

谢谢您的帮助！

6个回答

这是通过 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>';
@naomik 是否将此类技巧引入设置取决于用户。这对 Vue 来说没什么大不了的，因为它无论如何都依赖于它的自定义 .vue 文件格式。
2021-03-28 15:45:44
JavaScript 不再是 JavaScript。Babel/webpack 为我们提供了这种 Frankenstein 语言，不知何故，新开发人员应该知道 ECMAScript 规范在哪里结束，用户空间插件/转换从哪里开始。真的很难过，哎。
2021-03-29 15:45:44
我个人认为，如果您愿意，可以增加灵活性是一件好事。我认为它不像弗兰肯斯坦，而更像是伏特龙；您可以像狮子一样做事，也可以将不同的狮子组合在一起以拥有更大的机器人。是的，有时您会收到这样的问题，但并不是找不到答案。真的，您可以对任何规模的任何项目采取科学怪人或 voltron 的观点，这只是“使用和理解依赖项”。
2021-04-01 15:45:44
使用vue-cliv3+ 时，您应该使用~@引用src文件夹。例如：$font-path: '~@/assets/fonts/';
2021-04-04 15:45:44
@ChrisSchmitz 这取决于上下文和观点。这样做会限制项目使用 Webpack。如果项目打算在 ES6 module到来时使用原生 ES6 module，或者在 Node 中使用 CommonJS module，这可能不是一件好事。另一方面，较长的相对路径可能更难维护和重构。
2021-04-09 15:45:44

还要记住，您也可以在 tsconfig 中创建变量：

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

这可以用于命名约定目的：

import { componentHeader } from '@components/header';
但是这种别名将在源 JS 中保持裸露，然后在运行时您需要有一个包装器来让别名工作。也许有一种方法可以通过 babel 将此 TS 语法在构建时进行转换？使用 Typescript 的tsc不是，因此你需要像module-aliasor 之类的东西tsconfig-paths。
2021-03-17 15:45:44
添加此设置后，当单击导入的module时，vs 代码无法重新设置路径并且无法进入文件。
2021-03-27 15:45:44

我克服了以下组合

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE 将停止警告 uri，但这会在编译时导致无效的 uri，在“build\webpack.base.conf.js”中 

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

宾果游戏！

resolve('src') 对我不起作用，但 path.resolve('src') 有效

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

也许尝试添加 webpack。mix.webpackConfig引用了laravel mix。

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

然后在vue中使用。

<img src="@imgSrc/logo.png" />
其它你可能感兴趣的问题
上一篇如何对 HTML 表格执行实时搜索和过滤 下一篇如何使用 jQuery $.getScript() 方法包含多个 js 文件