Detailed explanation of Vue CL3 configuration path alias

In Cli3 tool, configure path alias

Recently, I built a Vue project with Vue Cli3 scaffolding. I found that there was no build directory and the webpack-related things in it were gone. After reading the official documents and checking the information, I found that they were all configured in it.

Configure path alias for easy reference, without writing that long

Before configuration:

import TodoList from '../../components/TodoList'

After configuration (no need to care about file hierarchy relationships):

import TodoList from 'components/TodoList'

Add '' in the root directory,

Add the following code:

const path = require('path')
function resolve(dir) {
 return (__dirname, dir)
}
 = {
 lintOnSave: true,
 chainWebpack: config => {
  
   .set('@', resolve('src'))
   .set('assets', resolve('src/assets'))
   .set('components', resolve('src/components'))
   .set('layout', resolve('src/layout'))
 }
}

use:

import TodoList from 'components/TodoList'

Things to note

1. After the file is created, no operation is needed. @vue/cli-service will recognize it by itself. If an error occurs, etc. can be heard first, you can try restarting the IDE or starting the project.
2. After the vue project is created, the default is not available, it is an optional file

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.