What does the @ mean inside an import path?

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>';

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';

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