Recently, I have participated in the use of vue+ springBoot without separating the front and back ends. After the front-end packaging, the dist file cannot be run and reported 404 error. The resources under static cannot be accessed.
Question 1: We know that the front and back ends do not separate projects, and some static images and pages are placed directly under resource/static. Since the front and back ends are developed separately, the front end performs cross-domain processing. Putting the dist file in the background is equivalent to a local static resource, so there is no need for cross-domain processing. The path baseURL introduced into the cross-domain can be empty.
const service = ({
//baseURL: '/appstore',
baseURL: '',
responseType: 'json',
timeout: 5000 // request timeout
})
Question 2: It is the problem of assetsPublicPath. First analyze assetsPublicPath and assetsSubDirectory.
Find the build configuration under config/ file and change it to assetsPublicPath: '/dist/'
build: {
index: (__dirname, '../dist/'),
// Paths
assetsRoot: (__dirname, '../dist'),
assetsSubDirectory: 'static',
// assetsPublicPath: '/', assetsPublicPath: '/dist/',
}
- index: template
- assetsRoot: The path to the file stored after packaging
- assetsSubDirctory: The path to store static resources other than
- assetsPublicPath: represents the relative address of the referenced resource after packaging
This configuration will be OK
When accessing the background, add assetsPublicPath address dist, that is, http://localhost:8080/dist/#
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.