Webpack stepping on the pit — resource path 404 problem after packaging

Time:2021-7-28

preface

This article is a project created based on the lower version of vue-cli2. X. to modify the webpack configuration after vue-cli3.0, you need to create a new one under the project root directoryvue.config.js, but they all change the soup without changing the dressing

Project configuration

The page is very simple, a paragraph of text, and a background picture

The following configuration items are important:

  • Assetroot: file storage path after packaging
  • Assetssubdirectory: static resource path (other resources except index.html will be put here)
  • Assetspublicpath: the path prefix of the referenced resource in index.html

Suppose we do the following configuration

# /config/index.js
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',

Access white screen questions

The directory of dist after packaging is as follows

# dist
┌── static
│   └── css
│   │   └── *.css
│   └── img
│   │   └── *.jpg
│   └── js
│   │   └── *.js
└── index.html

Then, double-click to open index.html, what? Why is the screen white

F12 take a look and find that there is a problem with the resource path here, because static / JS / xxx represents the root path, and we can’t find the resource in the project directory when we open it, so the screen will naturally be blank.

Webpack stepping on the pit -- resource path 404 problem after packaging

The packaged directory structure is fixed, while index.html and static are at the same level. You can use relative paths to introduce resources under static

to configure:

assetsSubDirectory:'./'

After the configuration is completed, package the access, the text comes out, and the background picture is split

Webpack stepping on the pit -- resource path 404 problem after packaging

Background image split

F12 found a problem with the image resource path: static / img / vague_ bg.9cfff92.png。 Because img is introduced in CSS, combined with the packaged directory structure, the correct should be / static / img / xxx, but the problem is that assetssubdirectory has been set as the relative path

There is a remedy. Don’t you go back to the static directory by backing back two paths in xxx.css?

Configure URL loader

#/ build / webpack.base.conf.js set rules
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use: [
    {
      loader: "url-loader",
      options: {
        limit: 10000,
        name: utils.assetsPath("img/[name].[hash:7].[ext]"),
        publicPath: "../../"
      }
    }
  ]
},

After setting, package access and perfect~

Webpack stepping on the pit -- resource path 404 problem after packaging

an account of happenings after the event being told

Some people may ask, why not directly set assetssubdirectory: ‘/’ at the beginning, that is, the root path can also solve the problem?

Yes, yes,It can really solve the problem. But I beep a lot of beeps to provide solutions to some problems, the pits I stepped on and how to arrange them. If the following path is set, the current resources can only be in the root path. The project may be integrated into the back-end project (or solved through directory mapping), not necessarily in the root path. Set the relative path of the resource bit under the current dist to ensure that there is no problem with the resource path in any environment.

This article is a problem I encountered when I just graduated from college in 18 years. I wrote it in my blog before. My blog was hacked because of my neglect of management. Now I share it and record my mental journey.


END

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]