快捷導(dǎo)航

解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題

更新時間：2023年03月19日 15:49:22 作者：月影星云

這篇文章主要介紹了解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問頁面顯示空白

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),//默認(rèn)時
?? ?history: createWebHashHistory(process.env.BASE_URL),//修改后
?? ?routes
})
export default router;

解決以上這兩步，就解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題

在打包項(xiàng)目時顯示空白頁問題和一些解決思路

在項(xiàng)目開發(fā)完畢后我們就會進(jìn)行打包

npm run build

打包生成的文件會在dist文件夾中

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

接下來我們從幾個方面來進(jìn)行分析：

一、打包時整體資源路徑

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

在vue-ui 里配置：

在vue.config.js里配置：

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

二、路由模式

是哈希還是歷史模式

推薦哈希模式兼容性更高 #以后路徑不會發(fā)送給服務(wù)器避免一些錯誤

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

三、開發(fā)和生產(chǎn)環(huán)境切換的原因

因?yàn)槲覀冮_發(fā)環(huán)境時

npm run serve 模擬的是本地服務(wù)器

打包成dist文件夾導(dǎo)致端口等一些變化當(dāng)中的內(nèi)容請求不過來所以導(dǎo)致空白頁

我們可以簡單部署本地服務(wù)器讓 dist 跑起來

創(chuàng)建文件夾

在文件夾終端初始化 npm npm init -y
安裝 express npm i express -S
把dist 復(fù)制到新文件夾中
創(chuàng)建 app.js 寫代碼

開啟gzip 減小文件體積使傳輸速度更快

安裝對應(yīng)包 npm install compression -p
導(dǎo)入包 const compression = require('compression')
啟用中間件 app.use(compression())

使用PM2 管理應(yīng)用

安裝 npm i pm2 -g
啟動項(xiàng)目：pm2 start .\app.js --自定義名稱
查看運(yùn)行項(xiàng)目 pm2 ls
重啟項(xiàng)目 pm2 restart 自定義名稱（ID）
停止項(xiàng)目 pm2 stop 自定義名稱（ID）
刪除項(xiàng)目 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í)行構(gòu)建之前可以進(jìn)行一些優(yōu)化

在 vue.confjg.js 中分別設(shè)置本地服務(wù) 和構(gòu)建的入口文件

module.exports = {
  chainWebpack:config=>{
    //發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      //entry找到默認(rèn)的打包入口，調(diào)用clear則是刪除默認(rèn)的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
 
      //使用externals設(shè)置排除項(xiàng)
      config.set('externals',{
        vue:'Vue',
        axios:'axios',
        lodash:'_',
        echarts:'echarts',
        nprogress:'NProgress',
      })
 
// 在項(xiàng)目的根目錄創(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
      })
    })
 
  }
}