Springboot+Vue front-end and back-end separation development--merge and package (no cross-domain)

Sui Sui Nian: I recently participated in a front-end and back-end separation project based on spring boot+vue2. Because of my lack of project experience, I encountered various cross-domain problems when packaging and deploying. It took a long time for the teacher to deploy the project to the server. ....... After this difficult deployment process, the teacher said to me again: It seems that the separation of the front and back ends is not good for us. There are still various cross-domain problems in the deployment. Can you find a way to change it to not Separate projects? So after consulting various blog experience summaries and within the scope of my personal ability, I had to solve it according to the method of separation of development and non-separation of deployment. Spring boot integrates Vue static resources into a jar package, which can be quickly deployed without cross-domain requests, and has Conducive to subsequent development and maintenance work.

The first step: front-end project packaging

1. vue.config.js configuration

let proxyObj = {};
const CompressionPlugin = require("compression-webpack-plugin");
proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081"
};
proxyObj['/'] = {
    ws: false,
    target: 'http://localhost:8081',
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
}
module.exports = {
    productionSourceMap: false,
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    },
    
}

Many blogs here say to modify the modification vue.config.jsin the file publicPathaspublicPath: './'，可能是大家的代码结构不同这里给我带来很多麻烦（尝试了很多次后端就是访问不到静态资源，哭晕在厕所），我这里前端不需要修改任何配置，按前后端分离开发时的打包配置就好。

2、运行npm run build,生成的静态资源存放在dist文件夹下

 3. Copy all the files under the dist file to the static directory under the resources folder under spring boot

     You can open the index.html file to check the access path. Note that there is no /static

   

 4. Because this project uses Spring Security, modify SecurityConfig to allow access to various types of static resources

 @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/css/**", "/js/**", "/static/index.html", "/img/**", "/fonts/**", "/static/favicon.ico", "/verifyCode");
        web.ignoring().antMatchers("/swagger-resources/**");
        web.ignoring().antMatchers("/v2/**");
        web.ignoring().antMatchers("/**/*.json");
        web.ignoring().antMatchers("/index.html");
        web.ignoring().antMatchers("/global/**","/static/**");
    }

 5. Add access to static page configuration WebMvcConfig

@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addViewControllers(ViewControllerRegistry registry) {
        // TODO Auto-generated method stub
        // 注册访问 /login 转向 page-login.html 页面
        registry.addViewController("/login").setViewName("page-login.html");
        super.addViewControllers(registry);
    }

    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        // TODO Auto-generated method stub
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
        super.addResourceHandlers(registry);
    }

}

6. Modify application.properties to add static resource path

spring.mvc.static-path-pattern=/static/**
spring.web.resources.static-locations=classpath:/static

7. Start the backend

 8. Open the browser and enter http://localhost:8081/index.html#/

Note that I am in hash mode here, and enter http://localhost:8081/index.html/       in history mode

      to access the system page

reference:

Spring Security static resource access_weixin_30627341's blog-CSDN blog 

Postscript Help! ! ! ! ! !

Next, I want to remove index.html from the address bar. How to do it, please give me guidance and help~