How to package static resources in vue

This article mainly introduces the pitfalls and solutions in vue static resource packaging. This article mainly solves the path problem. Now I will share it with you and give you a reference.

This article mainly solves the problem of

①.vue-cli default configuration is packaged and deployed to a specific path and the static resource path error problem is solved;

②.After static resources are packaged using relative paths The css file introduces a large image path error problem.

1. Problem

vue-cli scaffolding generates the default packaging configuration file by running npm run build. After packaging, 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 Yes Normal access, 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, and the packaged resources are used Absolute root directory path, so when the project is deployed to a specific directory, the resource path introduced cannot be correctly resolved.

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 The 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. Further analysis

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 path problem in the

css file, it must be Which part of the packaging resource path is not configured properly? Analyzing the packaging process, it turns out that the css is introduced in js or written in the vue file. The css file is first processed by less, postcss, etc., and then processed by ExtractTextPlugin. ExtractTextPlugin will All css in js are extracted 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 The 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;

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 the image name cannot be added md5 string is not conducive to version control

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

In jQuery How to achieve the animation effect of rebounding when hitting the edge?

How to use sass in vue cli webpack (detailed tutorial)

In How to change the P tag text value in jQuery

The above is the detailed content of How to package static resources in vue. For more information, please follow other related articles on the PHP Chinese website!