So lösen Sie das Problem, dass die Zugriffsseite leer angezeigt wird, nachdem das vue3-Projekt gepackt und auf dem Server veröffentlicht wurde

Nachdem das vue3-Projekt gepackt und auf dem Server veröffentlicht wurde, wird die Zugriffsseite leer angezeigt

1. Verarbeiten Sie den publicPath in der Datei vue.config.js

wie folgt:

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 .js-Datei im Router-Ordner

Die Verarbeitung ist wie folgt: Verwenden Sie den geänderten Teil

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;

um die beiden oben genannten Schritte zu lösen und das Problem der Anzeige leerer Seiten beim Zugriff auf das vue3-Projekt zu lösen, nachdem es gepackt und veröffentlicht wurde server

Das Problem der Anzeige leerer Seiten beim Packen des Projekts und einige Lösungsideen

In Nachdem die Projektentwicklung abgeschlossen ist, werden wir sie packen

npm run build

Die durch das Packen generierten Dateien befinden sich im dist-Ordner

Aber manchmal Beim Öffnen von index.html wird eine leere Seite angezeigt. Als nächstes werden wir sie unter verschiedenen Gesichtspunkten analysieren:

In vue-ui konfigurieren:

In vue.config.js konfigurieren:

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,
}

2. Routing-Modus

Ist es ein Hash- oder ein historischer Modus?

Der empfohlene Hash-Modus hat eine höhere Kompatibilität. #Der Pfad wird in Zukunft nicht mehr an den Server gesendet, um einige Fehler zu vermeiden ein dist-Ordner. Daher kann der Inhalt einiger Änderungen, z. B. des Ports, nicht angefordert werden, was zu einer leeren Seite führt. Wir können einfach den lokalen Server bereitstellen, um dist ausführen zu lassen. Erstellen Sie den Ordner Initialisieren Sie npm im Ordnerterminal npm init -y

Installieren Sie express npm i express -S

Kopieren Sie dist in einen neuen Ordner

App.js erstellen Code schreiben

Aktivieren Sie gzip zum Reduzieren Dateigröße und schnellere Übertragung.

Installieren Sie das entsprechende Paket npm install compress -p

Verwenden Sie PM2, um Anwendungen zu verwalten.
• Installieren Sie npm i pm2 -g.

• Starten Sie das Projekt: pm2 start .app.js --custom name
  Projekt pm2 neu starten, Benutzerdefinierter Name (ID) neu starten

• Projekt pm2 stoppen, Benutzerdefinierter Name (ID) stoppen

Projekt pm2 löschen, Benutzerdefinierter Name (ID) löschen

app.js:

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

  Es ist kein Problem, dist hier auszuführen und an den Backend-Bruder zu übergeben

Vier. Einige Optimierungen können vor der Ausführung des Builds vorgenommen werden

• Lokale Einstellungen im vue.confjg.js-Dienst und in den erstellten Eintragsdateien festlegen

  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')
  })

main-dev.js Der Haupteingang der Entwicklungsversion

main-prod.js Der Haupteingang der Release-Version ist hier Die Entwicklungsversion verbessert, um unnötige Abhängigkeiten zu löschen und CDN zu verwenden, um Routing-Lazy-Loading-Plug-Ins einzuführen und zu konfigurieren...

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Zugriffsseite leer angezeigt wird, nachdem das vue3-Projekt gepackt und auf dem Server veröffentlicht wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!