Detailed explanation of vue-cli+webpack processing of static resources and webpack packaging steps

This time I will bring you a detailed explanation of the steps for vue-cli webpack to process static resources and webpack packaging. What are the precautions for vue-cli webpack to process static resources and webpack packaging? The following is a practical case. Get up and take a look.

The pitfalls of webpack packaging through Vue-cli

The scaffolding built by Vue-cli for the Vue project is indeed very convenient, but packaging is easy A blank page appears, or the corresponding static resource cannot be loaded.

I solved it by changing the assetsPublicPath of index.js under project/config to './' and turning it into a relative path.

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

Processing static resources

You may notice that in projects that combine vue-cli with webpack, we usually have two static resources Resource paths: src/assets and static/, what is the difference between them? This article mainly introduces how vue-cli and webpack are combined to handle static resources. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Packaged resources

In order to answer this question, we must first understand how Webpack handles static resources. In the *.vue component, all templates and CSS modules are parsed by vue-html-loader and css-loader to find the path URL.

For example, in <img src alt="Detailed explanation of vue-cli+webpack processing of static resources and webpack packaging steps" > and background<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: url(./logo.png ), "./logo.png" is a relative path and will be loaded as a dependency by Webpack.

But because logo.png is not JavaScript, so if it is regarded as a dependent flower, we need to parse it through url-loader and file-loader. This template has already configured the corresponding loader for you, so you usually don't have to worry about relative path deployment issues.

Even though these resources may be inlined/copied/renamed during the build process, they are still an important part of the source code. This is why we recommend placing static resources in a separate /src folder, like other resource folders.

In fact, you don’t have to put them all in /src/assets, you can organize and utilize them according to modules/components. For example, you can put any components into their own directory and store static resources in that directory.

Resource introduction rules

Relative paths, such as ./assets/logo.png will be parsed into module dependencies. They will be replaced by an automatically generated URL based on your Webpack output configuration.

A path without a prefix, such as assets/logo.png, is the same as a relative path and is escaped to ./assets/logo.png

A path with a ~ prefix. ~ is considered a module request, the same as <a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png'). Root path, such as /assets/log.png

Get the resource path in JavaScript

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

This resource path will also be processed by file-loader Then return the processed path. And Webpack will load all the images in the bgs directory at once.

"Real" static resources

In contrast, none of the files in static/ will be processed by Webpack. They will be copied directly to the target folder, and absolute paths must be used to reference these files.

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:

Detailed explanation of the steps for php to call the google interface to generate a QR code

Detailed explanation of the steps for using PHPThumb image processing

The above is the detailed content of Detailed explanation of vue-cli+webpack processing of static resources and webpack packaging steps. For more information, please follow other related articles on the PHP Chinese website!