After Vue is packaged, it opens as a blank page and the console reports an error 'Failed to load resource: net::ERR_FILE_NOT_FOUND'

Problem Description

When we complete the development and package it with npm run build to form a dist file, when we access the index in the dist file, there will be a blank page that does not display anything, and the console will report 'Failed to load resource: net::ERR_FILE_NOT_FOUND' The error is actually because the reference path of the file in the packaged dist directory is incorrect, and an error will be reported because the file cannot be found, resulting in a white screen. The solutions for cli2.0 and cli3.0 are different

Vue cli2 version solution

It is very simple to find the index.js configuration file under our config folder

Find the build-related configuration, the default configuration of assetsPublicPath is '/', we change it to './' and

repackage it after the modification is complete

Vue cli3 version solution

The directories formed by cli3 and cli2 are different. First, we find the new vue.config.js file in the root directory

• Add the following code to the file
  

	javascript
		module.exports = {
    
    
		 publicPath: "./" 
		};

The second is that if we choose the history mode in our routing file, we need to comment it out,

modify it and pack it again.