ES6导入使用（'@'）在使用Webpack的vue.js项目中登录路径 [英] ES6 import using at ('@') sign in path in a vue.js project using Webpack

问题描述

我开始一个新的vue.js项目，所以我使用vue-cli工具来构建一个新的webpack项目（即 vue init webpack ）。

当我走过生成的文件时，我注意到在 src / router / index.js 文件中的以下导入：

 从'vue'
导入Vue从'vue-router'的路由器
 import您好'@ / components / Hello'//<  - 这是我的qusestion是关于
 
 Vue.use（路由器）
 
导出默认新路由器（{
路线：[
 {
路径：'/'，
名称：'你好'，
组件：你好
} 
] 
}）
  

我没有看到标志（ @ ）。我怀疑它允许相对路径（也许？），但我想确保我明白它真正做什么。

我尝试在线搜索，但无法找到解释（因为搜索at sign或使用文字字符 @ 不能作为搜索条件）。

@ 在这个路径（链接到文档会很棒），这是一个es6的事情吗？一个webpack的东西？一个vue加载器的东西？

更新

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

虽然对其他stackoverflow文章的评论不是这个问题的确切答案（在我的情况下这不是一个babel插件）确实指出我在正确的方向找到它是什么。

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

这是有道理的，因为它给你一个相对路径src文件和将删除导入路径末尾（通常需要）的 .vue 的要求。

感谢您的帮助！

解决方案

resolve.alias 配置选项，而不是Vue的特定。

在Vue Webpack模板中，Webpack配置为将 @ / 替换为 src 路径：

  resolve：{
 extensions：['.js'，'.vue'，'.json']，
别名：{
 ... 
'@'：resolve（'src'），
} 
}，
 ... 
  




I'm starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).

As I was walking through the generated files I noticed the following imports in the src/router/index.js file:

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
        }
    ]
})

I've not seen the at sign (@) in a path before. I suspect it allows for relative paths (maybe?) but I wanted to be sure I understand what it truly does.

I tried searching around online but wasn't able to find an explanation (prob because searching for "at sign" or using the literal character @ doesn't help as search criteria).

What does the @ do in this path (link to documentation would be fantastic) and is this an es6 thing? A webpack thing? A vue-loader thing?

UPDATE

Thanks Felix Kling for pointing me to another duplicate stackoverflow question/answer about this same question.

While the comment on the other stackoverflow post isn't the exact answer to this question (it wasn't a babel plugin in my case) it did point me in the correct direction to find what it was.

In in the scaffolding that vue-cli cranks out for you, part of the base webpack config sets up an alias for .vue files:

This makes sense both in the fact that it gives you a relative path from the src file and it removes the requirement of the .vue at the end of the import path (which you normally need).

Thanks for the help!

解决方案

This is done with Webpack resolve.alias configuration option and isn't specific to Vue.

In Vue Webpack template, Webpack is configured to replace @/ with src path:

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

这篇关于ES6导入使用（'@'）在使用Webpack的vue.js项目中登录路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！