Talking about Vue Path Optimization Resolve

When you create a Vue + WebPack project, there are many configurations, but the path is optimized for convenience of development.

1. Resolve.extensions

In WebPack.Base.conf.js, we can see the resolve configuration, where Extengsions are an array, as shown below :

Extensions: [‘.js’, ‘.vue’, ‘.json’],
   With this configuration, when we use the components in the components, we can apply components in the route, such as: 

Import Hello from ‘@ Components / Hello “
  , hello.vue, we don't need to add .vue suffix can be referenced, if you don't need Extensions, we must use @ Components / Hello.vue To introduce this file. 
2. RESOLVE.ALIAS

When referenced between components, it may be such that

Import Hello from ‘../src.components/hello’;

 where the path is relative to the current page. But if nesting, etc. is more complicated, then it is more troublesome. But if we pass this configuration:   
Resolve: {EXTENSIONS: [‘.js’, ‘.vue’, ‘.json’],Alias: {‘Vue $’: ‘Vue / Dist / Vue.esm.js’, ‘@Pages’: path.join (__ DIRNAME, “..”, “src”, “@components”: Path.join (__ DIRNAME, “..”, “SRC”, “Components”), // Note: Static resources cannot be set up by SRC. // “@assets”: path.join (__ Dirname, “..”, “src”, “assets”),}

where Vue $ is introduced into Vue, It can be written like this:
  Import Vue from 'Vue'  

In addition, for @Pages and @ Components we can quote directly, and save a lot of complex applications, additional @ can eliminate ambiguity. As shown below:

Import Hello from ‘@ Components / Hello’;
   

Import app from ‘@ Pages / App’
 When it is worth noting: we can't use in WebPack.config.js.. / ./ The way in the form of the form, but is represented by path.join and __dirname, otherwise the error will be reported.   In addition: In the component, we will reference some static files, namely the files under Static, and we can't configure it under Alias, but must use a general configuration. 
The above is the full content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment