一、需求
使用前后端分离编写了个小程序,前端使用的是vue-cli3创建的项目,后端使用的是springboot创建的项目,部署的时候一起打包部署,本文对一些细节部分进行了说明。二、Vue项目具体配置
(1) vue正常开发时随意,在打包时候,有些配置需要和后端保持一致 (2)配置生产时环境变量: (file: .env.production), .env.production是我自己配置的生产时环境变量,可以自己创建(具体可以参考:vue-cli3环境配置),也可以忽略这个,直接在下面两步中填写,例如,在axios的配置中,可以直接配置成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
- VUE_APP_BASE_URL
- VUE_APP_CONTEXT和VUE_APP_ASSETS
module.exports = { // 设置路径 publicPath: process.env.VUE_APP_CONTEXT, assetsDir: process.env.VUE_APP_ASSETS, ...... }publicPath和assetsDir的作用可以参考官网,如果assetsDir不配置,默认会把index.html文件和css等目录都放到static目录下,这样复制springboot项目下会出现无法访问静态资源的问题,尝试了几种方法,还是将assetsDir配置成static比较好。打包后的资源目录结构如下:
dist --static ----css ----fonts ----img ----js --favicon.ico --index.html复杂的时候,将static文件夹复制到springboot的/src/main/resource下,将favicon.ico和index.html也复制到static目录下。如果springboot是多module工程,静态文件放到启动文件所在模块下的resource目录中。复制后的springboot目录如下:
/src --main --|--java --|--|--com.xx.xx.WebApplication --|--resource --|--|--static --|--|--|--css --|--|--|--fonts --|--|--|--img --|--|--|--js --|--|--|--favicon.ico --|--|--|--index.html --|--|--application.properties
三、springboot项目配置
静态资源复制到springboot后,还是会出现无法访问资源的问题,需要设置资源访问规则。 具体代码是: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); } }