How to optimize vue+resolve

This time I will show you how to optimize vue resolve. What are the precautions for vue resolve optimization? The following is a practical case, let’s take a look.

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.

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 the component through routing in the component, it can be more convenient to apply, such as:

import Hello from '@components/Hello';

That is, we don't need to add the .vue suffix to the Hello.vue component to reference it. If we don't use extensions, we must use @components/Hello.vue to introduce this file.

2. resolve.alias

When components refer to each other, 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 this 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, you 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 the path method of ../ and ./. Instead, we use 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to optimize vue+resolve. For more information, please follow other related articles on the PHP Chinese website!