SoFunction
Updated on 2025-04-05

vue-cli How to set aliases for a project

1. Usage scenario: During the project development process, various files are often needed, such as img, css, js, etc. We can set aliases for different directories in vue-cli, which is convenient for us to use.

-cli 2x configuration

// Add an alias to the resolve configuration item in its alias
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/',
   '@': resolve('src'),
  }
 }

-cli 3x configuration

// Create in the root directory
var path = require('path')
function resolve (dir) {
 (__dirname)
 return (__dirname, dir)
}
 = {
 chainWebpack: config => {
  
   .set(key, value) // key,value is defined by yourself, such as .set('@@', resolve('src/components')) }
}

4. Save and restart the project

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.