vue cli 4.x打包后如何部署到tomcat服务器上

背景：

这两天想把vue项目挂载在阿帕奇上，然后发现各种问题，搜索大法改了配置问题，又有其他问题。然后搜啊搜，终于找到一个解决方案了。

特写在此：https://www.cnblogs.com/zsg88/articles/12557862.html  感谢这位大哥

下面都是转载

使用npm run build打包好dist后，不能直接打开里面的index.html，否则页面是一片空白

这时候我们就需要用服务器来代理我们的页面，可以使用ningx，tomcat，或者apache，这里我们使用tomcat当作范例

找到tomcat的webapp目录
找到tomcat的文件夹后，在webapp文件夹下放入我们需要的dist文件即可，但是我们发现输入http://localhost:8080/dist后，还是一片空白，原因是少了一步操作。

解决页面一片空白的情况：
这时候我们还应该

第一步
添加一个文件 vue.config.js
(4.x版本是没有该文件的，需要自己创建的)

在vue.config.js里面填入  （如果是其他版本的vue可能要自行去搜publicPath字段名称）

// vue.config.js
module.exports = {

publicPath: './'
}

第二步

将src=>router目录里的index.js

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

改为

const router = new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes
})

即将mode里的history改为hash即可

如果不改mode会出现
图片无法显示的问题

二、

如果想在 域名/子路径 (如 http://localhost:8080/miaomiao) 下访问 如下配置：

路由配置：

const router = new VueRouter({
mode: 'history',
base: miaomiao
routes
})

vue 配置

module.exports = {
  publicPath:'/miaomiao',
    devServer: {
      proxy: {
        '/ajax': {
          target: 'https://121212',
          ws: true,
          changeOrigin: true
        }
      }
    }
  }