Detailed explanation of resolve in vue path optimization

When creating a vue+webpack project through vue-cli, many of them have already been configured, but the path can be optimized to facilitate development. This article mainly introduces the resolve of Vue path optimization. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. resolve.extensions

In webpack.base.conf.js, we can see the resolve configuration, where the extensions are an array, as shown below ：

extensions: ['.js', '.vue', '.json'],

Through this configuration, when we apply components through routing in components, we can apply them more conveniently, such as:

import Hello from '@components/Hello';

That is, we can reference the Hello.vue component without adding the .vue suffix. If we do not use extensions, we must use @components/Hello.vue to introduce this file.

2. resolve.alias

When referencing each other between components, it may look like this:

import Hello from '../src.components/Hello';

The path is relative to the current page. But if nesting is more complex, it will be more troublesome to write. But if we pass such a configuration:

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(__dirname, "..", "src", "pages"),
   "@components": path.join(__dirname, "..", "src", "components"),
   // 注意： 静态资源通过src，不能这么设置。
   // "@assets": path.join(__dirname, "..", "src", "assets"),
  }

where vue$ means introducing vue, we can write it like this:

import Vue from 'vue'

In addition, we can directly quote @pages and @components, eliminating a lot of complex applications. In addition, @ can eliminate ambiguity. As shown below:

import Hello from '@components/Hello';

import App from '@pages/App'

It is worth noting: In webpack.config.js we cannot use ../ and . /This form of path method uses path.join and __dirname to represent the path, otherwise an error will be reported.

In addition: In the component, we will reference some static files, that is, files under static. At this time, we cannot use the configuration under alias, but must use the general configuration method.

Related recommendations:

MySql uses skip-name-resolve to solve the problem of slow client connection to the external network. How to solve the problem

The above is the detailed content of Detailed explanation of resolve in vue path optimization. For more information, please follow other related articles on the PHP Chinese website!