打開(kāi)白屏

解決方法

在vue.config.js頁(yè)面 添加publicPath:'./',

const { defineConfig } = require('@vue/cli-service')
  
module.exports = defineConfig({  
  transpileDependencies: true,
  publicPath:'./',
  lintOnSave: false,
  // 其他配置項(xiàng)...  
  devServer: {  
    proxy: {  
      '/api': {  
        target: 'http://api.zxhgc.cn/', // 實(shí)際請(qǐng)求地址  
        changeOrigin: true,  
        pathRewrite: {  
          '^/api': '' // 移除路徑中的 /api  
        }  
      }  
    }  
  }  
})

可能出現(xiàn)問(wèn)題

使用base導(dǎo)致的

> newpro2@0.1.0 build
> vue-cli-service build

 ERROR  Invalid options in vue.config.js: "base" is not allowed

改成publicPath就好

使用baseUrl導(dǎo)致的

vue cli3.x之 ： ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed

改成publicPath就好

注意點(diǎn)

檢查項(xiàng)目根目錄下的vue.config.js文件，確認(rèn)里面的配置選項(xiàng)是否正確。可以參考Vue官方文檔中的配置選項(xiàng)來(lái)核對(duì)。

如果不確定哪個(gè)選項(xiàng)出了問(wèn)題，可以嘗試注釋掉vue.config.js文件中的大部分內(nèi)容，然后逐步解除注釋并重新運(yùn)行構(gòu)建命令，以找到具體出錯(cuò)的配置項(xiàng)。

確保vue.config.js中所有的選項(xiàng)名稱和值的類型都符合Vue CLI的要求。

如果你是通過(guò)插件或者加載器來(lái)配置Vue項(xiàng)目的，確保這些插件或加載器是最新版本且兼容你當(dāng)前使用的Vue CLI版本。

如果以上步驟都不能解決問(wèn)題，可以嘗試重新創(chuàng)建一個(gè)新的Vue項(xiàng)目，并逐步遷移你的代碼和配置到新項(xiàng)目中，有時(shí)候這也能解決一些隱藏的配置問(wèn)題。

如果問(wèn)題依然存在，可以搜索具體的錯(cuò)誤信息，或者在Stack Overflow等社區(qū)提問(wèn)，提供完整的錯(cuò)誤信息和相關(guān)配置，以便獲得更具體的幫助。

vue3+ts白屏問(wèn)題知識(shí)分享

Vue 3 結(jié)合 TypeScript (TS) 的白屏問(wèn)題可能由多種原因引起。白屏通常意味著頁(yè)面沒(méi)有正確渲染或渲染過(guò)程中出現(xiàn)了錯(cuò)誤。以下是一些可能的原因以及相應(yīng)的解決方案：

1.打包/構(gòu)建問(wèn)題

確保依賴正確：檢查 package.json 文件中 Vue 3 和 TypeScript 的依賴是否正確安裝。

檢查構(gòu)建配置：確保 Webpack、Vite 或其他構(gòu)建工具的配置正確無(wú)誤。

清除緩存：嘗試清除 node_modules 文件夾和鎖文件（如 package-lock.json 或 yarn.lock），然后重新安裝依賴。

2.TypeScript 配置問(wèn)題

檢查 tsconfig.json：確保 TypeScript 的配置文件正確無(wú)誤，特別是與 Vue 相關(guān)的配置。

類型定義：確保所有的 Vue 組件和 TypeScript 類型定義都是正確的。

3.Vue 組件問(wèn)題

檢查組件：確保所有的 Vue 組件都正確導(dǎo)入和使用。

生命周期鉤子：在 Vue 3 中，生命周期鉤子有所變化。確保沒(méi)有使用已廢棄的鉤子或錯(cuò)誤地使用新的鉤子。

4.渲染錯(cuò)誤

控制臺(tái)錯(cuò)誤：查看瀏覽器控制臺(tái)是否有任何錯(cuò)誤或警告。

Vue Devtools：使用 Vue Devtools 檢查組件的狀態(tài)和渲染過(guò)程。

5.路由問(wèn)題

Vue Router：如果你使用 Vue Router，確保路由配置正確，沒(méi)有導(dǎo)致白屏的路由問(wèn)題。

6.異步數(shù)據(jù)加載

數(shù)據(jù)加載：如果頁(yè)面依賴于異步數(shù)據(jù)加載，確保數(shù)據(jù)加載過(guò)程沒(méi)有出錯(cuò)，并且在數(shù)據(jù)加載完成前不要嘗試渲染組件。

7.第三方庫(kù)/插件沖突

檢查第三方庫(kù)：確保沒(méi)有與 Vue 3 或 TypeScript 沖突的第三方庫(kù)或插件。

8.源碼問(wèn)題

審查源碼：如果以上都沒(méi)有問(wèn)題，那么可能是源碼中的某些邏輯或代碼導(dǎo)致的問(wèn)題。嘗試逐步注釋或刪除部分代碼，以定位問(wèn)題所在。

調(diào)試建議：

使用 source maps：在構(gòu)建配置中啟用 source maps，以便在瀏覽器中查看未壓縮的源碼，便于調(diào)試。

逐步調(diào)試：使用瀏覽器的開(kāi)發(fā)者工具進(jìn)行逐步調(diào)試，觀察變量的變化和代碼的執(zhí)行流程。

額外資源：

Vue 3 文檔：Vue 官方文檔提供了關(guān)于 Vue 3 的詳細(xì)信息和最佳實(shí)踐。

TypeScript 文檔：TypeScript 官方文檔可以幫助你更好地理解和使用 TypeScript。

社區(qū)和論壇：Stack Overflow、Vue 論壇等社區(qū)中可能有其他開(kāi)發(fā)者遇到并解決了類似的問(wèn)題，可以搜索并參考他們的解決方案。

到此這篇關(guān)于vue3+ts出現(xiàn)白屏問(wèn)題的解決方法詳解的文章就介紹到這了,更多相關(guān)vue3白屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論