What does the @ mean inside an import path?
JavascriptWebpackEcmascript 6vue.jsJavascript Problem Overview
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!
Javascript Solutions
Solution 1 - Javascript
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>';
Solution 2 - Javascript
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 - Javascript
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!
Solution 4 - Javascript
resolve('src') no works for me but path.resolve('src') works
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src')
},
extensions: ['*', '.js', '.vue', '.json']
},
Solution 5 - Javascript
Maybe try adding in webpack. mix.webpackConfig references laravel mix.
mix.webpackConfig({
resolve: {
alias: {
'@imgSrc': path.resolve('resources/assets/img')
}
}
});
And then in vue use.
<img src="@imgSrc/logo.png" />
Solution 6 - Javascript
Something must have changed. The answer given here is no longer correct. This project in Chapter09 uses the @ sign in its import statements but the webpack.config.js file doesn't have a path resolve statement:
let service = process.VUE_CLI_SERVICE
if (!service || process.env.VUE_CLI_API_MODE) {
const Service = require('./lib/Service')
service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}
module.exports = service.resolveWebpackConfig()