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

出現下面頁面即代表部署成功

總結

以上是生活随笔為你收集整理的vue cli 4.x打包后如何部署到tomcat服务器上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。