How to set an alias for a custom path in Vue

How to configure custom path aliases in Vue

In our daily development, we often import some modules or components. If we use relative paths:

import uEditor from "../../../../../components/tools";

It will appear bloated and redundant. If there is a slight mistake in the reference, a -404 error will appear, which is not elegant. 404 errors will often occur. If the file changes, you need to find the change path one by one and modify it again, which is very troublesome. Versions above vue cli3 provide a file alias function in node_modules. However, it is still recommended to modify the node_modules code as little as possible unless there is a special requirement.

Create vue.config.js and write the configuration code

module.exports = {
    configureWebpack: {
        resolve: {
            alias: { //Configure alias, you need to recompile after modification to take effect 'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views',
            }
        }
    }
}

As shown below:

Note: If you use an alias in an HTML path, you need to prefix the reference with "~".

Other references in the document:

The above is the method that I introduced to you in Vue to set aliases for custom paths. I hope it will be helpful to you. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!