vue3專案打包發(fā)佈到伺服器後存取頁面顯示空白

1、處理vue.config.js檔案中的publicPath

處理如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: 'dist',
    indexPath: 'index.html',
    lintOnSave: false,
    transpileDependencies: true,
})

2、處理router資料夾中的index.js檔案

#處理如下：採用修改後的部分

import { createRouter, createWebHistory, createWebHashHistory  } from 'vue-router';
import routes from "./routes";

const router = createRouter({
    //history: createWebHistory(process.env.BASE_URL),//默認時
    history: createWebHashHistory(process.env.BASE_URL),//修改后
    routes
})
export default router;

解決以上這兩步，就解決vue3項目打包發(fā)佈到伺服器後訪問頁面顯示空白問題

在打包專案時顯示空白頁問題和一些解決思路

在專案開發(fā)完畢後我們就會進行打包

npm run build

打包產(chǎn)生的檔案會在dist資料夾中

但有時候開啟index.html 會出現(xiàn)空白頁面

接下來我們從幾個面向來分析：

一、打包時整體資源路徑

根據(jù)實際情況要判斷? ? 是/? ?還是./?

#在vue-ui 裡配置：

在vue.config.js裡設定：

module.exports = {
//基本路徑 文件打包后放的位置
publicPath:‘./'，
 
//默認輸出文件夾為dist，填入的名字為打包后的文件名
outputDir:‘name',
 
// 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄。資源放的目錄
assetsDir: “./static”,
 
// 指定生成的 index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑 index的路勁和名字
indexPath: ‘./index.html',
 
//打包后是否生成map文件，map文件能看到錯誤代碼位置，設置為false不生成map文件，打包體積縮小
productionSourceMap: false,
}

二、路由模式

是雜湊還是歷史模式?

推薦雜湊模式相容性更高#以後路徑不會發(fā)送給伺服器避免一些錯誤

const router = new VueRouter({
  routes,
  mode:'hash',
})

• 三、開發(fā)和生產(chǎn)環(huán)境切換的原因
  因為我們開發(fā)環(huán)境時
• npm run serve 模擬的是本地伺服器
  #打包成dist資料夾導致連接埠等一些變化當中的內(nèi)容請求不過來所以導致空白頁
• 我們可以簡單部署本機伺服器讓dist 跑起來

建立資料夾

#在資料夾終端初始化npm npm init -y

安裝express ?npm i express -S

• #把dist 複製到新資料夾中

• 建立app.js 寫入程式碼
開啟gzip 減少檔案體積使傳輸速度更快

##安裝對應套件?npm install compression -p

• 導入套件const compression = require('compression')

• 啟用中間件app.use(compression( ))

• 使用PM2 管理應用程式
安裝npm i pm2 -g
啟動專案：pm2 start .\app.js --自訂名稱
#查看執(zhí)行專案pm2 ls

##重啟專案pm2 restart 自訂名稱（ID）

停止項目pm2 stop 自訂名稱（ID）

刪除項目pm2 delete 自訂名稱（ID )

• app.js：

const express = require('express')
const app = express()
 
const compression = require('compression')
 
app.use(compression()) // 一定要把這一行寫在 靜態(tài)資源托管之前
app.use(express.static('./dist'))
 
app.listen(80,()=> {
  console.log('server running at http://127.0.0.1')
})

• 在這裡能跑起來dist 給後端大哥也不成問題了

  四、執(zhí)行建置之前可以進行一些最佳化

  在vue.confjg.js 中分別設定本地服務?和建置的入口檔案

module.exports = {
  chainWebpack:config=>{
    //發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      //entry找到默認的打包入口，調(diào)用clear則是刪除默認的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
 
      //使用externals設置排除項
      config.set('externals',{
        vue:'Vue',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
      })
 
// 在項目的根目錄創(chuàng)建一個vue.config.vue文件，添加上 chainWebpack，修改args里的參數(shù)配置，重新返回就可以  這里是 判斷是開發(fā)版本 還是 發(fā)布版本
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
 
    })
    //開發(fā)模式
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
 
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
 
  }
}

######### main-dev.js### 開發(fā)版本總入口###############main-prod.js### 發(fā)布版本總入口在這裡根據(jù)開發(fā)版本改進刪除不需要的依賴項改用cdn引入、設定路由懶載入的外掛程式......##########

以上是vue3項目打包發(fā)佈到伺服器後訪問頁面顯示空白怎麼解決的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！