Many projects scaffolding will add a @ the SRC directory by default alias, project introduction, actual although can simplify path, but also brings a very troublesome problem: IDE doesn’t recognize the alias, thus leading to cannot be done automatically path, unable to identify the output of the reference resources, appear unnecessary alarm, and so on and so forth.

I stumbled across a jsconfig.json file in vscode’s web project, such as:

{
  "compilerOptions": {
    "baseUrl": "."."paths": {
      "@ / *": ["src/*"]},"target": "ES6"."module": "commonjs"."allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"]."exclude": ["node_modules"]}Copy the code

As long as you have this file, vscode will recognize the alias properly.

JetBrains’ IDE, it turns out, is simpler and can be configured as follows:

Webpack in project Settings TAB in the configuration file to the < projectRoot > / node_modules / @ vue/cli – service/webpack config. Js.

After saving and re-opening the project, not only SRC, but all aliases such as utils and so on are recognized as normal.

In fact, this has been written in the vuE-CLI3 document, but the original expression is not intuitive, I have been ignored.