vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決

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

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項目打包發佈到伺服器後訪問頁面顯示空白問題

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

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

npm run build

打包產生的檔案會在dist資料夾中

但有時候開啟index.html 會出現空白頁面

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

一、打包時整體資源路徑

根據實際情況要判斷    是/   還是./ 

#在vue-ui 裡配置：

在vue.config.js裡設定：

module.exports = {
//基本路径 文件打包后放的位置
publicPath:‘./'，
 
//默认输出文件夹为dist，填入的名字为打包后的文件名
outputDir:‘name',
 
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。资源放的目录
assetsDir: “./static”,
 
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字
indexPath: ‘./index.html',
 
//打包后是否生成map文件，map文件能看到错误代码位置，设置为false不生成map文件，打包体积缩小
productionSourceMap: false,
}

二、路由模式

是雜湊還是歷史模式 

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

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

• 三、開發和生產環境切換的原因
  因為我們開發環境時
• npm run serve 模擬的是本地伺服器
  #打包成dist資料夾導致連接埠等一些變化當中的內容請求不過來所以導致空白頁
• 我們可以簡單部署本機伺服器讓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 --自訂名稱
#查看執行專案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()) // 一定要把这一行写在 静态资源托管之前
app.use(express.static('./dist'))
 
app.listen(80,()=> {
  console.log('server running at http://127.0.0.1')
})

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

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

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

module.exports = {
  chainWebpack:config=>{
    //发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      //entry找到默认的打包入口，调用clear则是删除默认的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
 
      //使用externals设置排除项
      config.set('externals',{
        vue:'Vue',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
      })
 
// 在项目的根目录创建一个vue.config.vue文件，添加上 chainWebpack，修改args里的参数配置，重新返回就可以  这里是 判断是开发版本 还是 发布版本
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
 
    })
    //开发模式
    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### 開發版本總入口###############main-prod.js### 發布版本總入口在這裡根據開發版本改進刪除不需要的依賴項改用cdn引入、設定路由懶載入的外掛程式......##########

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