1.可能是打包的路徑有問題

你可以打開打包后的index.html檢查一下css,js的路徑是否正確；
路徑不正確，你就需要在vue.config.js中修改這個屬性：（vue.config.js不知道怎么配置看這里：vue.config.js配置）

publicPath: "./", // 根域上下文目錄

2.router.js配置的問題

Vue-router 中有hash模式和history模式，vue的路由默認是hash模式，
1）要啟用// mode: "history"屬性的話，需要加一個base。否則頁面就會空白；
2）也可以注釋掉，采用默認的hash模式，

import Vue from "vue"; import VueRouter from "vue-router"; const Home = () => import("../views/Home.vue"); Vue.use(VueRouter);const routes = [{path: "/",name: "Home",component: Home}, ];const router = new VueRouter({// mode: "history",// base: "/history",routes });export default router;

大概了解一下：

• hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。比如這個
  URL：http://www.abc.com/#/hello，hash 的值為 #/hello。它的特點在于：hash 雖然出現在 URL
  中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。
• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和
  replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go
  的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。

更加詳細的解釋參考：
vue項目的mode:history模式

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue 打包后页面空白问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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