使用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 aboutVue.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：

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      ...

      '@': resolve('src'),

    }

  },

  ...

Answer 2

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

"paths": {

  "@components": ["src/components"],

  "@scss": ["src/styles/scss"],

  "@img": ["src/assests/images"],

  "@": ["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: {

  extensions: ['.js', '.vue', '.json'],

  alias: {

    'src': resolve('src'),

  }

},