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

Question

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

谢谢您的帮助！

Answer 1

这是通过Webpack resolve.alias配置选项完成的，并不特定于Vue。在Vue Webpack模板中，Webpack配置为替换@/为srcpath：&nbsp; resolve: {&nbsp; &nbsp; extensions: ['.js', '.vue', '.json'],&nbsp; &nbsp; alias: {&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; '@': resolve('src'),&nbsp; &nbsp; }&nbsp; },&nbsp; ...

Answer 2

另外请记住，您也可以在tsconfig中创建变量："paths": {&nbsp; "@components": ["src/components"],&nbsp; "@scss": ["src/styles/scss"],&nbsp; "@img": ["src/assests/images"],&nbsp; "@": ["src"],}可以将其用于命名约定：import { componentHeader } from '@components/header';

Answer 3

我通过以下组合克服了import HelloWorld from '@/components/HelloWorld'=>import HelloWorld from 'src/components/HelloWorld'IDE将停止警告uri，但这会在编译时在“ build \ webpack.base.conf.js”中导致无效的uri。resolve: {&nbsp; extensions: ['.js', '.vue', '.json'],&nbsp; alias: {&nbsp; &nbsp; 'src': resolve('src'),&nbsp; }},