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

「爱情、让人受尽委屈。」 2021-09-25 08:44 970阅读 0赞

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

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

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

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

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

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

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

1.vue-router：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70][]

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 两个目录的文件，这里也不在详述它们的区别。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 1][]

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

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

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

![20210511105901726.png][]

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

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

遇到的问题：

访问第二个项目时：

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

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

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

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

![20210511110843393.png][]

![20210511110857567.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70]: /images/20210923/7625203a96d94acb9e4a6c6fb3e061d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 1]: /images/20210923/9ae684977df24e7ea75767cadff75761.png
[20210511105901726.png]: /images/20210923/8b8d66682a3c4776b55d9b6ecec9305a.png
[20210511110843393.png]: /images/20210923/aa47f97255174884bf95f8676af29886.png
[20210511110857567.png]: /images/20210923/b44e0e77324348bb8d847d3477c30c47.png