Today, I used the static resources in the public folder in the project. I did not find any problems locally, but the project was deployed to the fat server and reported a 404 error.
I found that the reason is that my project is not deployed at the root of the domain name, and my reference to the public file is referenced through an absolute path because there is a path error.
The path is as follows:
<img :src="`/`">
I found this situation in the official website document that requires the publicPath prefix for the URL: .BASE_URL
The correct reference path is:
<img :src="`${.BASE_URL}`">
Of course, it is best to avoid placing files in the public folder, because any static resources placed in the public folder will be simply copied without going through webpack.
Supplementary knowledge:@vue/cli 3 Package file reading absolute path processing
@vue/cli 3 is encapsulated and is usually configured in it. The official website does not recommend the webpack output processing. I have stepped on a pit here, hoping to help the friends I met later.
= {
// Here is the configuration to read the current directory online. The default is the root path, such as /js, /css, etc., which depends on the project. baseUrl: .NODE_ENV === 'production' ? './' : '/',
// others
}
The above article on vue-cli3's static resource error in accessing public folder is all the content I share with you. I hope you can give you a reference and I hope you support me more.