273

我正在开始一个新的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符号（）。我怀疑它允许相对路径（也许吗？），但是我想确保我了解它的真正作用。

我尝试了在线搜索，但是找不到解释（可能是因为搜索“在符号处”或使用文字字符@不能作为搜索条件）。

这@条路径的作用是什么（链接到文档非常好），这是es6吗？一个webpack的东西？vue-loader东西？

更新

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

虽然在其他stackoverflow帖子上的评论不是对该问题的确切答案（在我看来，这不是babel插件），但确实为我指明了正确的方向，以查找问题所在。

在为您准备的vue-cli脚手架中，基本的webpack配置的一部分为.vue文件设置了别名：

这样做既有道理，也为您提供了src文件中的相对路径，并且消除.vue了导入路径末尾对的要求（通常是您需要的）。

谢谢您的帮助！

— 克里斯·施密茨
source

3

看我的评论。

— Felix Kling

1

@FelixKling这不是完全相同的重复，因为它不能回答整个问题，这是es6吗？一个webpack的东西？vue-loader东西？

— Estus Flask

是的，我认为这个问题很相似，但并非重复。无论如何，我都想出了问题的根源，并用解释解释了问题，因为我无法将其添加为答案。

— 克里斯·施米茨

@estus：答案非常清楚，它不是ES6的一部分，而是Webpack配置的东西，您不觉得吗？此处的情况也是如此，只是配置的性质有所不同。

— 菲利克斯·克林

@FelixKling我相信，当发情期指出存在什么问题时，我还没有添加更新（我在输入更新时看到了他的评论）。我已经准备好，并且有关于我的特定实例的详细说明，所以我很好。多谢你们。

— 克里斯·施米茨

243

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

在Vue Webpack模板中，Webpack配置为替换@/为srcpath：

  const path = require('path');

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

别名用作：

import '@/<path inside src folder>';

— Estus Flask
source

171

JavaScript不再是JavaScript。Babel / webpack为我们提供了这种科学怪人的语言，并且新开发者也将以某种方式知道ECMAScript规范在哪里结束以及用户级插件/转换在哪里开始。真是可悲，imo。

— 谢谢您

3

@naomik由用户决定是否将此类技巧引入设置。对于Vue而言，这并不重要，因为它仍然依赖于自定义的.vue文件格式。

— Estus Flask

15

我个人认为，如果需要，可以增加灵活性是一件好事。我认为它不像科学怪人，而更像沃尔顿。您可以像狮子一样做东西，也可以将不同的狮子组合在一起以拥有更大的机器人。是的，有时您会遇到类似这样的问题，但这并不是找不到答案。实际上，您可以在任何规模的任何项目中进行弗兰肯斯坦或沃尔顿观，这只是“使用和理解依赖项”。

— 克里斯·施米茨

1

@ChrisSchmitz这取决于上下文和角度。这样做会限制项目使用Webpack。如果项目打算在其到达时使用本机ES6模块，或者该节点是CommonJS可用于模块的Node，则可能不是一件好事。另一方面，较长的相对路径可能更难维护和重构。

— Estus Flask

3

使用vue-cliv3 +时，应使用~@引用src文件夹。例如：$font-path: '~@/assets/fonts/';

— Consta Gorgan

9

另外请记住，您也可以在tsconfig中创建变量：

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

可以将其用于命名约定：

import { componentHeader } from '@components/header';

— 泰勒·坎顿
source

但是这种别名将在源JS中保留下来，然后在运行时需要包装器干预才能使别名正常工作。也许有一种通过babel的方法来使这种TS语法在构建时转换？使用Typescript的tsc不是，因此您需要类似module-alias或的东西tsconfig-paths。

— 肯

3

我克服了以下组合

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

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

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

展开摘要

宾果！

— 伦·特伦
source

1

resolve（'src'） 对我无效，但path.resolve（'src'）有效

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

— 马塞洛·阿西斯（Marcelo Assis）
source

1

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

mix.webpackConfig({

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

然后在使用中。

<img src="@imgSrc/logo.png" />

— 保罗
source

使用Webpack在vue.js项目中的（@）登录路径中使用ES6导入

更新