If you are not sure about the static and templates directories in springboot, you can read this article
static and templates directories
1. Problem
After vue is packaged, it is deployed to springboot to access. After all, the front and back ends should be separated and deployed separately. There is an additional service. Vue can be packaged and placed in the static directory in springboot. There are many similar blog posts on the Internet. I encountered several detailed problems during deployment, and I will list them one by one as follows. I hope it will be helpful to you.
2. Vue package
Vue packaged and deployed to springboot, and the mode in the route should be set to hash
// Vue is packaged and deployed in springboot, and the mode here needs to be changed to hashexport default new Router({
mode: 'hash',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
3. Where to put the packaged content?
Generally, the directory after the project is packaged is in the dist directory, including the static directory and a file.
The first typePlace both the static directory and files in the resources directory in springboot;
The second typeIf you don't want to use the default static directory, you can create a new directory yourself. Be careful to change the configuration file and tell springboot what your static directory is.
-locations = classpath:/staticxxx/
4. Visit
The first type
Direct access to static files:ip:port/
The second typeIt doesn't look good to bring a .html, so go to the controller and forward it to
ip:port/index
@GetMapping("/index")
public String index() {
return "forward:/";
}
If security is used, please pay attention to let go of static resource permissions, otherwise it will be 404.
5. How to deploy multiple projects
If you share an interface, but have several projects on the front end, you want to package it and throw it into springboot to access it.
For example, there are shop projects and user projects.
Create two folders, shop and user in the static directory in springboot; each folder contains packages for their respective front-end projects. If you access it by entering the controller and forwarding method, please note that RequestMapping("shop") . The shop and shop names under static must be kept there, otherwise the 404 will not be able to find the static resource after forwarding. This is related to the principle of forwarding.
as follows:
ip:port/shop/index
shopTable of contents
RequestMapping("/shop")
@GetMapping("/index")
public String index() {
return "forward:/shop/";
}
ip:port/user/index
userTable of contents
RequestMapping("/user")
@GetMapping("/index")
public String index() {
return "forward:/user/";
}
-locationsThis configuration can configure multiple static directories. In this case, can you directly create shop and user directories under resources and then mark them all as static? This method is not tried and is being studied and studied without any attempts.
This is the article about the implementation example of vue packaging and deployment to springboot. For more related content on vue packaging and deployment to springboot, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!