springboot+vue部署多个前端共用一个后端项目

实际项目中不一定都是一个后端对应一个前端，这时，共用后端就成为可能。

本项目采用前后端分离开发，下面说说，如何部署的问题，这里采用整合部署打包成jar的方式，而非nginx部署。

 

首先部署第一个前端项目，即springboot+vue项目整合部署，和普通的项目整合部署相同。

1. 前端使用npm run build命令打包好，然后把dist目录下打包好的文件，直接粘贴放在后端项目的 src/main/resources/static 下即可。测试可以正常访问。如果这里出现问题，百度一下，如何整合部署springboot+vue项目。这里不在详述。

 

接下来，开始部署第二个前端项目。

2.由于头一个项目（放在static根目录下）已经占用了后端项目的 ‘/’ 路径， 即访问 http://xxxxx:8080/ 的时候，跳转的是第一个前端项目的网页。所以，第二个前端项目应该有一个单独的路径，用以区分，即需要建立后端项目的二级目录，子包路径。

第二个前端项目依次做如下配置，

1.vue-router：

vue-router官网有如上描述，所以 /app/ 就是你的第二个前端项目的访问路径。vue-router的index.js配置如下：

export default new Router({
// base为添加的配置项
  base: '/screenIndex/',
  routes: [{
      path: '/',
      name: 'Index',
      component: main
    }]
})

2. vue.config.js ：

新版本vue-cli项目采用vue.config.js来替代旧版本项目中的config build 两个目录的文件，这里也不在详述它们的区别。

 根据官方描述，可知，需配置一个publicPath选项。vue.config.js配置如下：

module.exports = {
  // process.env.NODE_ENV 用以区别是开发环境还是生成环境，在生成环境下 配置为 /screenIndex/
  publicPath: process.env.NODE_ENV === 'production' ? '/screenIndex/' : '/',
  ...
}

完成以上配置后，将项目打包，打包出来的文件应该部署在后端项目的 src/main/resources/static/screenIndex/ 目录下， /screenIndex/ 即为子包名路径。

额外的，我另外添加了一个controller接口用以跳转该项目，然后通过访问接口路径来访问第二个前端项目，如下：

    @GetMapping
    public ModelAndView index() {
        return new ModelAndView("screenIndex/index.html");
    }

 

 

遇到的问题：

访问第二个项目时：

1.浏览器报错，显示找不到静态资源，排查原因，vue项目打包是否打包好了，配置的子包名和static下包名是否一致，这里是 screenIndex。

2.报500，后台日志显示无法解析 '/screenIndex/index.html'，排除原因，controller接口跳转路径前去掉 '/'。

3.跳转成功，但显示空白页。

如果排查过后仍无法解决，还有一个原因，可能是由于idea抽了， 解决方法：

重启idea，清除缓存，在启动项目就好了，作者亲测有效。