Resource file processing
In our project structure, there are two paths to resource files, namely: src/assets and static/. So what is the difference between these two?
Webpacked resources
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 <img src="./"> and background: url(./), "./", both relative resource paths are resolved by Webpack to module dependencies.
Since it is not JavaScript, when it is regarded as a module dependency, we need to use url-loader and file-loader for processing. The template has these loaders configured so you don't need to worry about deployment when using relative/module paths. Since these resources may be inlined/copy/renamed at build time, they are essentially part of your source code. This is why we recommend putting static resources handed over to webpack under the /src path as other source files. In fact, you don't even need to put them all under the /src/assets path: you can organize the file structure based on the use of modules/components. For example, you can place each component and its static resources in its own directory.
Resource processing rules
Relative URLs, . ./assets/ will be interpreted as a module dependency. They will be replaced by a URL that is automatically generated based on your Webpack output configuration. URLs without prefixes, . assets/ will be regarded as relative URLs and converted to ./assets/
The URL with the prefix with ~ will be considered a module request, similar to require('some-module/'). If you want to use Webpack's module to process configuration, you can use this prefix. For example, if you have a path resolution for assets, you need to use <img src="~assets/"> to make sure the resolution is corresponding. The URL of the root directory, . /assets/ will not be processed.
Get resource path in Javascript
In order to get Webpack to return the correct resource path, you need to use require('./relative/path/to/'), parse it by the file-loader, and then return the processed URL. For example:
computed: {
background () {
return require('./bgs/' + + '.jpg')
}
}
Note the example above, in the final build, all images under the ./bgs/ path will be included. This is because Webpack cannot guess which one will be used at runtime, so it will include all of them.
"Real" static resources
For comparison, files under static/ are not processed by Webpack: they use the same file name and are copied directly to the final path. You must use absolute paths to reference these files, depending on the added and .
For example, the following default values are:
// config/
= {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
All files placed in the static/ directory should be referenced using the absolute URL/static/[filename]. If you change the value of assetSubDirectory to assets, then these URLs will be changed to /assets/[filename]
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.