Encounter problems
The iframe framework used in the vue project needs to embed a static page, the relative path used, there is no problem running locally, but error 404 is reported after packaging
Solutions
Since the relative path is used, the first reaction after the error is reported is to consider whether there is a problem with the path after packaging, so google the corresponding contents of the dist directory after vue packaging:
Detailed explanation of the dist file directory after the vue project is packaged
The .css file under the css folder is the css file used by the project. When you do webpack packaging, all the css styles will be packaged here. The .css.map
file under the css folder is a Source map file. Source map is an information file, which stores location information. That is to say, each position of the code after conversion corresponds to a position before conversion. The purpose is to help us debug the compressed css code, just to facilitate our debugging when developing.
The .js files under the js folder are the various vue components we wrote; .js.map is still the Source map file, which is convenient for us to debug the js code during development.
The app.js file contains the logic code of each page in the project.
The manifest.js file can be understood as a configuration file generated by webpack packaging. We generally don’t need to care about it.
The vendor.js contains some common code for each component of each page.
index.html is an html file for our front-end code entry
src relative path
We are using iframe to refer to the local static html file, and the static file needs to be placed in the folder static at the same level as src, as shown in the figure:
Write the "relative path" directly in the place where iframe is used, as shown in the figure below:
The path here will not change after packaging. Static files are searched according to the packaged path, so the description above using "relative path" is not accurate, but the "relative path" after packaging. You can understand it by looking at the figure below. This is the hierarchical relationship of the packaged files:
Here I wrote a lot of ../../../, and finally found that the real reference path is still http://localhost:8080/static/blog.html, because the upward search has reached the root directory, so no matter how many you write ../, the actual path is still http://localhost:8080/static/blog.html, so it is the same to directly write ./static/blog.html in the path below, and you can understand it by comparing the hierarchical relationship after packaging above.
