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