Problems in vue static resource packaging

This time I will bring you the problems in vuestatic resource packaging. What are the precautions in vue static resource packaging. The following is a practical case, let’s take a look.

①. The default configuration of vue-cli is packaged and deployed to a specific path. The static resource path error is an issue;

②. The css file introduces a large image path error when the static resource is packaged using a relative path.

1. Problem

The default packaging generated by vue-cli scaffoldingConfiguration fileAfter running npm run build, deploy the project to a specific path: such as:

//ip:port/public/springActivity/

Visit at this time:

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. Check the imported 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 from the above that the resource packaging path is wrong. The packaged resources use the absolute root directory path, so when the project is deployed to a specific directory, the resource path introduced cannot be correctly parsed.

3. Solve

It is necessary to use relative paths to process static resources when packaging, and change the resource release path configuration in build (config/index.js, build object):

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

At this time index.html can be accessed normally, and at the same time js and css resources can also be accessed normally, but the large image resources in the assets directory introduced in css have an error (server 404)

4. Re-analyze

View the imported image resource path As follows:

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

The resource path in the actual project is as follows:

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

Obviously the image import path is wrong. Analyzing the image import path, we found that the path has two additional directories "/static/css". It is guessed that the css file in the css directory imports the image path to "/static/img/question_bg.61a2825.png". Check the css file, css The image path introduced in is as follows:

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

5. When solving the

css file There is a problem with the path in the package. It must be that the resource path of the packaging link is not configured properly. Analyzing the packaging process, the css is introduced in js or written in the vue file. The css file is first processed by less, postcss, etc. After processing, it will Processed by ExtractTextPlugin, ExtractTextPlugin extracts all the css in js into the app.css file.

First set options.extract to false, turn off the css extraction function, package and deploy it to a specific directory again, visit: http://ip:port/public/springActivity/index.html, bang, page Normal display indicates that the Grand Duke is about to be completed.

Analyzing the packaged files, it was found that there was no css file, and all css files were found in the app.js file; css was injected into the index.html file through js, so the image resource path introduced in the css file should be It is relative to the index.html file path, that is: "static/img/question_bg.61a2825.png", which is consistent with the image resource path in the css file below, so the image can be accessed normally.

background:url(static/img/question_bg.61a2825.png)
Now I am sure I know where the problem lies, that is: ExtractTextPlugin did not convert the resource introduction path when extracting the css file, causing the app. css introduces static resources that are "static/img/ .png" relative to the app.css directory. The path relative to index.html is: static/css/static/img/ .png.

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

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

Packaging After deploying to a specific directory, access the index.html file. Everything on the page is normal. The app.css file is imported normally, and image resources are also imported normally. Check the app.css file to import image resources as follows:

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

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

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

Image resources can also be placed directly in the static directory generated by vue-cli to avoid the above problems, but in this way, md5string cannot be added to the image name, which is not conducive to version control

The above is the entire content of this article. I hope it will be helpful to everyone's study. I also hope that everyone will support Script Home.

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:

How to use datepicker

Detailed explanation of the use of high-order components of mixin

D3.js creates logistics map

The above is the detailed content of Problems in vue static resource packaging. For more information, please follow other related articles on the PHP Chinese website!