Vue-cli3 packaged integration project with springboot

First, demand

  

    Package deployment before and after use to write a small end of the separation procedure, using a front-end project vue-cli3 created using the back-end of the project springboot creation, deployment time together, this paper some of the details are described.

 

Two, Vue project specific configuration

 

    (1) vue casual, packed in time, some back-end configuration requires consistent and normal development

 

    (2) the production environment configuration variables: (file: .env.production),

  .env.production is my own production environment variable configuration, you can create your own (specifically refer to: VUE-CLI3 environment configuration ), you can ignore this, fill out the following two steps, for example, in axios configuration, You may be configured to directly Axios.defaults.baseURL = '/ app_name / v1'

 

NODE_ENV = 'production'
VUE_APP_BASE_URL= /app_name/v1
VUE_APP_CONTEXT=/pre-lcas
VUE_APP_ASSETS=static 

 

1. VUE_APP_BASE_URL

          All assigned to the http request for starting the path, the front end support assembly used in the project axios http requests, in the specified configuration file axios Axios.defaults.baseURL = process.env.VUE_APP_BASE_URL, so that the request was originally performed by the agents and the background, will add `/ app_name / v1`,

            For example: for use in front-end code is: axios.get ( '/ reqUrl / abc') ...... initiation request to the background, according to the above configuration, the request path packetized engineering becomes {http: / / xxx: xx / app_name / v1 / reqUrl / abc} by this configuration, the front end matches the request.

 

2. VUE_APP_CONTEXT and VUE_APP_ASSETS

        Was used to set the results packetized information, in the configuration file vue.config.js, the configuration is as follows:

= module.exports {
   // set the path 
  publicPath: process.env.VUE_APP_CONTEXT, 
  assetsDir: process.env.VUE_APP_ASSETS, 
...... 
}

Role publicPath and assetsDir can refer to the official website , if assetsDir is not configured, will index.html file and css and other directories into static directory, there will not be problems accessing static resources such projects under the copy springboot, tried several method, or the assetsDir configured static better. Resource directory structure after packaged as follows:

dist
--static
----css
----fonts
----img
----js
--favicon.ico
--index.html

Complex, the static folder to the next springboot / src / main / resource, and the favicon.ico index.html also copied to the static directory. If springboot is a multi-module project, static file into the resource directory startup file is located in the module. After copying springboot directory as follows:

/src
--main
--|--java
--|--|--com.xx.xx.WebApplication
--|--resource
--|--|--static
--|--|--|--css
--|--|--|--fonts
--|--|--|--img
--|--|--|--js
--|--|--|--favicon.ico
--|--|--|--index.html
--|--|--application.properties

 

Three, springboot project configuration

 

After copying static resources to springboot, or will not be a problem with access to resources, resources need to set access rules.

 

Specific codes are:

 

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}

 Fourth, explain

Some articles of this issue back-end integration package after separation on the front, two issues are explained,

One is to ensure that the integration of static resources can be accessed, this issue need to ensure that packaging is the path, because if the package mistakes, will not find the css / js index.html and other resources in the loading time;

Another request is to ensure the separation path, the user sees the address bar is the path vue-router in the page rendering is used to obtain data axios request path, open back is the service route, make sure the path and open the background axios the service matches the path.

 

Some mentioned in the article, the need for back-end router in the path processing, the course of my testing, there is no exception, just make sure the path and back-office services axios path match it.

 

Reference article:

vue-cli3.0 configured development environment, the test environment, online environment ( https://blog.csdn.net/qq_37055675/article/details/85047451 )

 

springboot + vue separated from the combined front and rear ends (Scheme https://my.oschina.net/u/1760791/blog/1577662 )

 

Configuration Reference vue-cli ( https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE )