vue scaffolding configuration path alias

Vue-cli 2.x configuration method

In the vue-cli 2.x project, enter the build folder, find webpack.base.conf.js, edit the file, and find the configuration item of the resolve field (webpack.config.js is based on webpack (an open source front-end packaging tool) configuration file.)

 resolve: {
    
    
    extensions: ['.js', '.vue', '.json'],
    alias: {
    
    
      '@': resolve('src'),   //src解析成@
      'assets': resolve('src/assets'),  // src/assets解析成assets
    }
  },

By default, src is configured. For example, in the alias of assets, note that the path cannot be written @ but must be written src. This is still a little different from version 3.

vue-cli 3.x configuration method

The configuration file in vue-cli 3.x is hidden in node_modules/@vue/cli-service/lib/config/base.js. Although we know where the files are hidden, generally we don't modify the files in node_modules.

So we can create a vue.config.js file in the root directory of the project to configure the path alias, which will be automatically loaded by @vue/cli-service, provided that the file must exist in the root directory of the project. Note that vue-cli 3.x has configured the src alias for us by default as @, so we don't need to configure src here.

when using an alias

Note that if you import a style or html image path, you need to add ~

<img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">

If it is a component

 import TabAside from 'components/tabbar/gameaside/TabAside.vue'