0
704
ViewsWhat does the @ mean inside an import path?
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!
3 answers
Answer question0
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:
const path = require('path');
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': path.resolve('src'),
}
},
...
The alias is used as:
import '@/<path inside src folder>';
0
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';
0
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!