How to solve the 404 error caused by not being able to access chunk-vendors.js in Vue project?

Vue project failed to load chunk-vendors.js, solution to return 404 error

When running the Vue project, the browser may not be able to access the chunk-vendors.js file, resulting in a 404 error accompanied by net::ERR_ABORTED 404 (Not Found) and MIME type error prompt. This is usually due to static resource loading failures, not issues with the project itself. If a file can be accessed when a new window opens, it is more likely to point to a path configuration error.

This article analyzes the problem and provides solutions.

Problem analysis and solutions:

The root cause of the problem is that the static resource path configuration after the project is built does not match the browser request path.

1. Check publicPath configuration: The publicPath configuration in the vue.config.js file determines the access path of the static resources after the project is built. Incorrect configuration will cause the browser to fail to locate resources. Make sure publicPath is set correctly, for example:

 module.exports = {
  // ...Other configurations publicPath: process.env.NODE_ENV === 'production' ? '/your-app-name/' : '/'
};

• process.env.NODE_ENV === 'production' ? '/your-app-name/' : '/' means that in the production environment, the resource path starts with /your-app-name/ , and in the development environment, it is / . Please replace /your-app-name/ with your actual application name or path.

2. Check the static resource path: Confirm that the static resource (such as chunk-vendors.js ) is located in the correct directory, usually static or public directory. Incorrect paths can also cause 404 errors.

3. Compression plugin conflict (possible cause): The provided vue.config.js configuration uses CompressionWebpackPlugin for gzip compression. Although compression itself does not directly cause 404, if the compression is configured improperly or conflicts with other configurations, it may affect the loading of resources. It is recommended to temporarily comment out some of the compressed code to see if the problem is solved. If the problem is solved, you need to double-check the configuration of the compression plugin to make sure it handles all static resources correctly.

4. Server MIME type setting: The browser error prompts that the MIME type is text/html , not application/javascript , indicating that the server may incorrectly recognize the .js file as an HTML file. Check your server configuration (such as Nginx or Apache) to make sure the MIME type of the .js file is set correctly.

5. Caching problem: Clear the browser cache and try to reload the page.

Summarize:

The key to solving chunk-vendors.js 404 error is to carefully check publicPath configuration, static resource path, and server configuration, especially the MIME type settings. If you use a compression plugin, you need to check that it is configured correctly. By gradually checking the above points, you should be able to solve this problem.

The above is the detailed content of How to solve the 404 error caused by not being able to access chunk-vendors.js in Vue project?. For more information, please follow other related articles on the PHP Chinese website!