ES6 import using at (‘@’) sign in path in a vue.js project using Webpack

ES6 import using at (‘@’) sign in path in a vue.js project using Webpack

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:

Related:  What's the recommended way to extend AngularJS controllers?
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!

Solutions/Answers:

Solution 1:

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'),
    }
  },
  ...

Solution 2:

Also keep in mind you can create variables in tsconfig as well:

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

This can be utilized for naming convention purposes:

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

Solution 3:

I get over with following combination

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

IDE will stop warning the uri, but this causes invalid uri when compile, in “build\webpack.base.conf.js”

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

Bingoo!

Related:  How to dynamically remove a stylesheet from the current page