Vue2 History模式部署到Nginx页面空白问题

在使用vue写好了前端页面，部署到nginx，发现前端页面空白，作为一个vue新手，找了白天，才搞定，记录一下。

由于一台服务器上我部署了多个前端，故要在访问vue页面时多加一层路径"investment"

Nginx配置如下所示：

 location /investment {
      try_files $uri $uri/ /investment/index.html;
      index index.html index.htm;
 }

但是部署后，发现页面空白，网上搜索了一下，发现很多人都遇到过这个问题，说需要在vue.config.js上加上 publicPath: ‘/investment/’,但是加上后发现还是不得行。

module.exports = defineConfig({
  publicPath: '/investment/',
  transpileDependencies: true,
  devServer: {
    proxy:{
      'http://localhost:8080/gateway/investment':{
        target:'http://xxxxxx/',
        changeOrigin: true
      }
    }
  }
})

最后才发现，还需要配置Router

加一行：base: ‘/investment/’,

export default new Router({
  base: '/investment/',
  mode: 'history',
  routes: [
    { path: '/', name: 'InputRepoter', component: InvestmentSheetUpload },
    { 
      path: '/query', 
      name: 'InvestmentSheetQuery', 
      component: InvestmentSheetQuery, 
      props: route => ({ companyNameParam: route.query.companyName, reportTypeParam:route.query.reportType, dateParam: route.query.date})
    },
    { path: '/list', name: 'InvestmentSheetList', component: InvestmentSheetList },
  ]
})

参考：https://blog.csdn.net/u011295864/article/details/107375774