After writing the project, package the Vue project and send it to Tomcat

Here are some of the problems with packing:

  1. Page 404
  2. Static Resource 404
  3. Dynamically import resource 404

Page 404

Solutions:

In index.js in the config folder of the vue project




The output of the module is dev (production) and build (build)

Add a prefix to the assetsPubicPath address under Build. For the ‘/’




Static Resource 404

Solutions:

In utils.js under build



Find the input module exports.cssloaders and add a line here: publicPath:’.. /.. / ‘




Dynamically import resource 404

Because introducing dynamic resources into a file is not handled by build.js in static, an error is reported.

  1. Use it if there are few filesRequire (' file path ')The introduction of

/ / the original path. The document body. Style. The backgroundImage ='url(.. /images/1-1.jpg)'; / / use the require introducing path document. Body. Style. The backgroundImage ='url('+require('.. /images/1-1.jpg') +') ';Copy the code

2. If there are too many local images, this is not a hassle to write, so in fact we are simplifying the operation in this way.

(This step has not been tested! Purely from online shared experience)

Step 1: Create a JSON folder in static

{
  images:{
    imgUrl1:"./static/banner1.png",
    imgUrl2:"./static/banner2.png",
    imgUrl3:"./static/banner3.png",    imgUrl4:"./static/banner4.png"}}Copy the code

The second step:Import json into the vUE file of the response and parse the reference

import imgs from "./static/images.json"
export default{
  data:{
    return(){
    imgsLists:imgs
    }
  }
}Copy the code