Describes the pitfalls and solutions in vue static resource packaging.

Describes the pitfalls and solutions in vue static resource packaging.

This article mainly addresses

①. A static resource path error occurs when vue-cli is deployed to a specific path after being packaged by default;

②. The css file is incorrectly introduced into the large image path after static resources are packaged and used in relative paths.

1. Problems

Run the npm run build package in the default packaging configuration file generated by vue-cli scaffolding, and deploy the project to a specific path: for example:

// Ip: port/public/springActivity/

Access:

Http: // ip: port/public/springActivity/index.html

Index.html can be accessed normally, but the referenced js, css, and other file server responses are all 404. view the introduced resource path as follows:

Http: // ip: port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
Http: // ip: port/static/js/app.815851e87b083afb82bf. js

2. Analysis

It can be seen that the package path of the resource is incorrect. The packaged resource uses the absolute root directory path. Therefore, when the project is deployed to a specific directory, the resource path introduced by the package cannot be correctly parsed.

3. Solution

During packaging, you need to use relative paths to process static resources and change the resource release path configuration in build (config/index. js, build object ):

Change assetsPublicPath: '/' to assetsPublicPath :'./',
Package the package again, deploy the resource to a specific path, and then access:

Index.html can be accessed normally, and js and css resources can also be accessed normally, but the large image resources under the assets Directory introduced in css are wrong (server 404)

4. Analyze again

View the introduced image resource path as follows:

Http: // ip: port/public/springActivity/static/css/static/img/question_bg.61a2825.png

The actual project resource path is as follows:

index.htmlstatic/ |--js/  |--*.js |--css/  |--*.css |--img/  |--*.png

Obviously, the image import path is incorrect. After analyzing the image import path, it is found that the path is "/static/css" two-tier. It is assumed that the css file under the css directory is "/static/img/question_bg.61a2825.png ", view the css file. The image path introduced in css is as follows:

Background: url (static/img/question_bg.61a2825.png)

5. Solve the Problem

In the hosts file.

First, set options. set extract to false, disable the css extraction function, package it again, and deploy it to a specific directory. Visit: http: // ip: port/public/springActivity/index.html. The page is displayed normally, dagong is coming to an end.

After analyzing the packaged files, we found that no css file exists and found that all css files are stored in the app. in the js file, use js to inject css into the ghost file path, that is, "static/img/question_bg.61a2825.png", which is consistent with the image resource path in the following css file, therefore, images can be accessed normally.

Background: url (static/img/question_bg.61a2825.png)
Now you are sure to know what the problem is, that is, the "static/img/. png" directory is the static resource, and the relative index.html of the "variable is static/css/static/img/. png.

Therefore, when using the ExtractTextPlugin plug-in, you also need to configure static resource path parameters. by querying information, you can solve this problem by adding publicPath:

If (options. extract) {return ExtractTextPlugin. extract ({use: loaders, fallback: 'vue-style-loader', publicPath :".. /.. /"// Add })}

The Upload File introduces image resources as follows:

Background: url (.../../static/img/question_bg.61a2825.png

After publicPath is configured, this path is added before the image file path introduced in the css file;

The publicPath attribute value is the relative path of the packaged app.css file to the index.html file.

Image resources can be directly stored in the static directory generated by vue-cli to avoid the above problems. However, md5 strings cannot be added to image names in this way, which is not conducive to version control.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.