Shulou(Shulou.com)06/02 Report--

What is the difference between the files in the dist directory in Vue2? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

There are eight files in the vue2 dist folder as follows:

Vue.common.js

Vue.esm.js

Vue.js

Vue.min.js

Vue.runtime.common.js

Vue.runtime.esm.js

Vue.runtime.js

Vue.runtime.min.js

Why is there a file? Let's talk about what scenarios these eight functions are used in and what's the difference.

Vue projects are divided into full builds and run-time builds according to how they are built.

According to the specification, it can be divided into UMD, CommonJS and ES Module.

To put it simply, the difference between a full build and a run-time build is whether you can use the template option, and the file is larger and smaller. According to different specifications, it can be run in different development environments.

Vue.common.js belongs to: a full CommonJS-based build can be used with packaging tools such as Webpack-1 and Browserify, and because it is a full build, you can use template options, such as:

Import Vue from 'vue'

New Vue ({

Template: `

Basic

`

}). $mount ('# app')

Note: when using packaging tools such as webpack-1, you need to configure aliases when using this version. Take webpack as an example:

{

Resolve: {

Alias: {

'vue$': 'vue/dist/vue.common.js'

}

}

}

Vue.esm.js belongs to: a complete build based on ES Module. It can be used with packaging tools such as Webpack-2 and rollup, and because it is a full build, you can use the template option, such as:

Import Vue from 'vue'

New Vue ({

Template: `

Basic

`

}). $mount ('# app')

Note: when using packaging tools such as webpack-2, you need to configure aliases when using this version. Take webpack as an example:

{

Resolve: {

Alias: {

'vue$': 'vue.esm.js'

}

}

}

Vue.js belongs to: a complete build based on UMD. Can be used for direct CDN references, and because it is a full build, you can use template options, such as:

New Vue ({

Template: `

Hi Vue

`

}). $mount ('# app')

Vue.min.js, like vue.js, is a compressed version

Vue.runtime.common.js belongs to: CommonJS-based run-time builds that can be used in packaging tools such as Webpack-1 and Browserify. Run-time builds do not include template compilers, so the template option is not supported, only the render option can be used, but even with run-time builds, templates can still be written in single-file components Because the template of a single file component is precompiled into the render function at build time, for the use of the render function, please refer to: http://cn.vuejs.org/v2/guide/render-function.html

Import Vue from 'vue'

New Vue ({

Render: function (h) {

Return h ('H2,'Hi Vue')

}

}). $mount ('# app')

Vue.runtime.esm.js

Vue.runtime.esm.js belongs to: run-time builds based on ES Module. It can be used with packaging tools such as Webpack-2 and rollup. Run-time builds do not include template compilers, so the template option is not supported, only the render option can be used, but even if run-time builds are used, templates can still be written in single-file components, because templates for single-file components are precompiled into render functions at build time. For the use of render functions, please refer to: http://cn.vuejs.org/v2/guide/render-function.html

Import Vue from 'vue'

New Vue ({

Render: function (h) {

Return h ('H2,'Hi Vue')

}

}). $mount ('# app')

Vue.runtime.js belongs to: a run-time build based on UMD that can be used for direct CDN references. This version, similar to vue.js, can be used for direct CDN references, and because it does not include a compiler, you cannot use the template option, only the render function:

New Vue ({

Render: function (h) {

Return h ('H2,'Hi Vue')

}

}). $mount ('# app')

Vue.runtime.min.js, like vue.runtime.js, is a compressed version

In short, remember that the template option is available for full builds, while run-time builds are not available, but either way, single-file components can be compiled into components. The UMD specification is suitable for direct reference by browsers without packaging. Both the CommonJS and ES Module specifications require packaging tools like webpack and rollup to work with.

Here is a question for you to think about. When building a vue project with vue-cli, there is usually an option, as follows:

The answer to the question about what is the difference between the files in the dist directory in Vue2 is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.