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

這篇“vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白怎么解決”文章吧。

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

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)時(shí)
    history: createWebHashHistory(process.env.BASE_URL),//修改后
    routes
})
export default router;

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

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

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

npm run build

打包生成的文件會(huì)在dist文件夾中

但有時(shí)候打開(kāi)index.html 會(huì)出現(xiàn)空白頁(yè)面

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

一、打包時(shí)整體資源路徑

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

在vue-ui 里配置：

在vue.config.js里配置：

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

二、路由模式

是哈希 還是 歷史模式 

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

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

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

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

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

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

我們可以簡(jiǎn)單部署本地服務(wù)器讓 dist 跑起來(lái)

創(chuàng)建文件夾

• 在文件夾終端 初始化 npm npm init -y

• 安裝 express  npm i express -S

• 把dist 復(fù)制到新文件夾中

• 創(chuàng)建 app.js 寫(xiě)代碼

開(kāi)啟gzip 減小文件體積 使傳輸速度更快

• 安裝對(duì)應(yīng)包  npm install compression -p

• 導(dǎo)入包 const compression = require('compression')

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

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

• 安裝 npm i pm2 -g

• 啟動(dòng)項(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()) // 一定要把這一行寫(xiě)在 靜態(tài)資源托管之前
app.use(express.static('./dist'))
 
app.listen(80,()=> {
  console.log('server running at http://127.0.0.1')
})

在這里能跑起來(lái) dist 給后端大哥也不成問(wèn)題了

四、執(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)建一個(gè)vue.config.vue文件，添加上 chainWebpack，修改args里的參數(shù)配置，重新返回就可以  這里是 判斷是開(kāi)發(fā)版本 還是 發(fā)布版本
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
 
    })
    //開(kāi)發(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 開(kāi)發(fā)版本總?cè)肟?/p>

• main-prod.js 發(fā)布版本總?cè)肟?在這里根據(jù)開(kāi)發(fā)版本改進(jìn) 刪除不需要的依賴項(xiàng) 改用cdn引入、配置路由懶加載的插件......

以上就是關(guān)于“vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白怎么解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。