Detailed explanation of the difference between assets and static in vue2.0 resource files

This article mainly introduces the difference between vue2.0 resource file assets and static. Now I will share it with you and give you a reference.

Resource file processing

In our project structure, there are two resource file paths, namely: src/assets and static/. So what is the difference between the two?

Webpacked Resources

In order to answer this question, we first need to understand how webpack handles static resources. In the *.vue component, all templates and css will be parsed by vue-html-loader and css-loader to find the URL of the resource.

For example, in and background: url(./logo.png), "./logo.png", they are all relative resources Paths will be parsed into module dependencies by Webpack.

Since logo.png is not JavaScript, when it is regarded as a module dependency, we need to use url-loader and file-loader for processing. The template already has these loaders configured, so you can use relative/module paths without worrying about deployment issues. Since these resources may be inlined/copied/renamed at build time, they are essentially part of your source code. This is why we recommend placing static resources processed by webpack under the /src path like other source files. In fact, you don't even need to put them all under /src/assets: you can organize the file structure based on module/component usage. For example, you can put each component and its static resources in its own directory.

Resource processing rules

Relative URLs, e.g. ./assets/logo.png will be interpreted as a module dependency. They will be replaced by an automatically generated URL based on your Webpack output configuration. URLs without a prefix, e.g. assets/logo.png will be treated as relative URLs and converted to ./assets/logo.png

URLs prefixed with ~ will be treated as module requests, similar to require( 'some-module/image.png'). Use this prefix if you want to take advantage of Webpack's module handling configuration. For example, if you have a path resolution for assets, you need to use to ensure that the resolution is correct. URLs relative to the root directory, e.g. /assets/logo.png will not be processed

Get the resource path in Javascript

In order to allow Webpack to return the correct For the resource path, you need to use require('./relative/path/to/file.jpg'), which will be parsed by file-loader and then the processed URL will be returned. For example:

computed: {
 background () {
  return require('./bgs/' + this.id + '.jpg')
 }
}

Note that in the above example, all images under the ./bgs/ path will be included in the final build. This is because Webpack cannot guess it. Which of them will be used at runtime, so all of them will be included.

"Real" static resources

As a comparison, files under static/ will not be processed by Webpack: they use the same file name, Copy directly to the final path. You must use absolute paths to reference these files, depending on build.assetsPublicPath and build.assetsSubDirectory added in config.js.

For example, the default value below is:

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

All files placed in the static/ directory should use absolute URLs Referenced by /static/[filename]. If you change the value of assetSubDirectory to assets, then these URLs will become /assets/[filename]

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using ajax to change page content and address bar URL without refreshing

JavaScript is based on Ajax to achieve non-refreshing Refresh and dynamically display the file content on the web page

AJAX processing method for XML returned by the server

The above is the detailed content of Detailed explanation of the difference between assets and static in vue2.0 resource files. For more information, please follow other related articles on the PHP Chinese website!