preface

Require is the CommonJS syntax. CommonJS modules are objects that must look for object properties when entering. Require used in project configuration files such as webpack.config.js in a project belongs to nodeJS category, while require in loaded components after entering index.js belongs to WebPack parsing category. Its goal is to encourage modularity of code, and it uses script loading steps that are different from traditional tags. It can be used to speed up and optimize code, but its main purpose is to modularize the code. It encourages the use of module IDS instead of URLS when using scripts.

Require the use of

Requirejs API:

  • define()– This function is used to create modules. Each module has a unique moduleID(ends with.js, such as lib/hello.js, hello.js), which is used forrequirejsThe runtime function of.defineFunction is a global function and does not need to be usedrequirejsNamespace.
  • require()– This function is used to read dependencies. Again, it is a global function and is not neededrequirejsNamespace.
  • require.config()– This function is used for configurationrequirejS.

doubt

let url = "@/assets/images/logo.png"
require(url)    / / an error

let url = "logo.png"
require("@/assets/images/"+url); / / right
Copy the code

Strange, the path is exactly the same after the name splicing, but when opening the page F12 debugging, I found that the path is compiled into file name + some character encoding.png, this may be through webpack compilation, the generated path is not the original path. And through the require (” SRC/assets/images/logo PNG “) in writing an absolute path, will be kept and automatically find and load the dist/public/images/logo. 2 d32dsa2. PNG file, But if require is a variable URL, compile package can not find the original path, the error!

Problem analysis

Static assets are static assets.

Files in the static directory are not compiled. After the project is packaged, dist folder will be generated. The files in static are just copied again. Since Webpack complies with CommonJS specification, static resources in assets directory must be dynamically added by JS using require. Otherwise it will be treated as a module dependency.

    assetsURL: require(".. /.. /.. /assets/images/logo.png")
    staticURL: ".. /.. /.. /assets/images/logo.png"
Copy the code
<style scoped> // before rendering.login-wrap {
      background-image: url("./titlea.png"); } </style> // render CSS.login-wrap[data-v-70c98a68] {
      background-image: url(/static/img/titlea.1e9fa570.png);
    }
Copy the code

Problem solving

This is a very strange question for the first time, and I believe many people will automatically say WTF…

The main reason for the problem is that after the page is modified, Webpack is compiled. After the compilation is completed, the project needs to be packaged. After the packaging is completed, the page can be hot loaded and refreshed.

If the incoming is a variable in the require, he is likely to be any of the files to any directory in a computer system, so in the packed static resources for his possible to your computer the whole disk traverse again, so at least in which determine the path of the directory, so you can accurately packaged which path of the object file, Then, when the code runs, it generates a regular match directly with the corresponding file name, because the packaged file may have hash values, which are long, inexplicable combinations of numeric characters with filename suffixes.

conclusion

In summary, remember to specify the path in require in as much detail as possible, and then concatenate the static resource filename variable

At the end

XDM, don’t say anything about this pit I first step for respect…

Writing is not easy, welcome everyone to like, comment, your attention, like is my unremitting power, thank you to see here! Peace and Love.

reference

Static resource path problem in VUE (SegmentFault