for webpack packaged pit

Vue-cli for Vue project scaffolding is really convenient, but packaging is easy to appear blank pages, or the corresponding static resources can not be loaded.

I solved the problem by turning assetsPublicPath of index.js in index.js into ". /", becoming a relative path.

 CD Vue demo NPM run dev / / / / / running program NPM run bulid //webpack Static/, what's the difference between them? This article mainly introduces how to deal with static resources with vue-cli and webpack, and it is very good to share with you, and it is also a reference for everyone. Let's take a look at the Xiaobian together, hoping to help you. 

packaged resources

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

, for example, is in < img SRC "./logo.png" > and background background: URL (./logo.png) , which is a relative path that will be loaded as a dependency.

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

even if these resources are likely to be inlined / copied / renamed during the construction process, they are also important components of the source code. That's why we propose to place static resources in /src folders alone, like other resource folders.

, in fact, you don't need to put them all in /src/assets. You can organize them according to modules / components. For example, you can put any component in their own directory and store static resources in that directory. The

resource introduces the rule

relative path, for example,./assets/logo.png will be parsed as a module dependency. They will be replaced by an automatic generation of URL based on your Webpack output configuration.

has no prefix path, such as assets/logo.png, and relative path, which means./assets/logo.png

has a prefix path. ~ is considered a module request, with require ('some-module/image.png') . The root path, such as the /assets/log.png

, gets the resource path

 computed: {background () {return} {return} Route。 And Webpack will load all the pictures in the BGS directory once and for all. 

"real" static resource

and this relative, all of the files in static/ will not be processed by Webpack. They will be copied directly to the target folder, and the referenced files need absolute paths.

summary of

above is a small compilation of vue-cli and webpack to deal with static resources and webpack packaging of the pit, hope to help you, if you have any questions please give me a message, the small editor will respond to you in time. Thank you for your support for the script home website.

that you may be interested in:


This concludes the body part

This paper fixed link: | Script Home | +Copy Link

Article reprint please specify:Vue-cli and webpack handle static resources and webpack packed pits | Script Home

You may also be interested in these articles!