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

使用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.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/dist/#/

 

 

 

转自https://blog.csdn.net/weixin_43560272/article/details/104187767