This article was first published in yoowin.me, welcome to visit!

For vue-CLI built projects, the page seen during NPM run dev corresponds to the index. HTML file in dist folder after NPM run build, not the index. HTML file in the root directory of the project.

The first project I built using VUe-CLI, after NPM run build, opened the index.html file in the Dist folder locally and the page was blank. NPM run Dev is perfectly fine locally. What made me even more depressed was that when I pushed it to Github, the DIST file was gone.

Two questions

After some groping, finally found the cause of the problem, we analyze these two problems one by one.

Ignore files

After comparing the github and local files, it is found that the most important dist file is not committed to Github, as shown below

Dist file is compiled and packaged after NPM Run build is executed. CSS, JS, images and other files are in dist file, so the file must be submitted to Github.

There is a.gitignore file in the root directory of the project. The file names will not be submitted to Github.

In the.gitignore file, you do have the dist file name, as shown below

Remove the dist file name from the.gitignore file and push it back to Github to create the dist file

Routing problem

After solving the problem of the dist file above, open the github Pages preview address under the file path and still display a blank page, as shown in the figure below

Looking at the console, we can see that the paths of the files are all broken, as shown below

The path

Here is an explanation of the path problem /,./,.. / difference:

  • /

    In order to/The initial path is the absolute path,/The root directory refers to the local disk, the root directory on Github refers to the root directory of the repository, and the root directory of the server on the website
  • . /

    In order to. /The path at the beginning is relative to the directory where the file resides. There is no difference between the following two cases 
    ./image/author.png
image/author.pngCopy the code
  • ../

    ../It is the parent directory relative to its own file and belongs to the relative path

We can’t move static files to the root directory. That would be silly.

So we need to find the config file and change the path to find the config/index.js file as shown below

Modify the parameter assetsPublicPath in the figure. After each NPM run build, the file path will be generated according to the parameter. There are two Settings:

AssetsPublicPath: ‘./’ or assetsPublicPath: ‘

Github /< Your name>.github. IO /< Repositories >/dist/index.html to see the preview page

conclusion

Every step in the pit is unpredictable, but after solving it is training, but also a little sense of achievement. Here is a summary of the problems encountered this time, I hope to help others.