background
In the early stage of eIDC project development, due to the urgency of the project, it is necessary to do a pure front-end demonstration project independent of the back-end, that is, it does not rely on the back-end to pack pure front-end static resources. The existing project code and packaging configuration need to be modified based on the above requirements. This article records and summarizes the problems encountered in the modification process.
The solution
Example Change the routing mode of the VueRouter to the default hash mode
Update SRC /router/index.js to comment out mode: ‘history’
Modify the Webpack packaging configuration
Change the value of assetsPublicPath from ‘/’ to ‘./’ in build/index.js
Modify the introduction of images in the code to a relative path
First of all, all image resources are introduced in relative path mode, including CSS styles, Style styles
Secondly, because the CSS content will be exported to another folder after packaging, the relative path written in the code and the actual relative path after packaging do not match, so you need to modify the corresponding packaging configuration
The final result
reference
- Vue implements packaged direct access
- There are three solutions to solve the problem that index. HTML in Dist cannot be opened directly by browser after Vue project is packaged
- Static image path error after vue package