So lösen Sie das Problem einer leeren Seite beim Öffnen eines Vue-Projekts nach dem Packen

In diesem Artikel wird hauptsächlich die Lösung zum Öffnen des Leerraums nach dem Packen des Vue-Projekts vorgestellt. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Viele Leute im Internet sagen, dass die Listendateien, die durch das Packen ihrer VUE-Projekte über Webpack generiert werden, in HBulider gepackt und dann auf dem Mobiltelefon geöffnet werden und leer sind. Der Hauptgrund dafür ist das Pfadproblem.

1. Denken Sie daran, den Exportpfad des Bulid-Moduls in index.js unter config zu ändern. Da der Inhalt in index.html über Skript-Tags eingeführt wird und Ihr Pfad falsch ist, ist er beim Öffnen definitiv leer. Schauen wir uns zunächst den Standardpfad an.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

Der Standard-AssetsPublicPath ist „/“, das Stammverzeichnis. Unsere index.html und static befinden sich im selben Verzeichnis. Es muss also in „./ ‘

geändert werden. 2. Es gibt noch etwas zu beachten. Der Standardmodus in der Routing-Konfiguration von router/index.js in src ist Hash. Wenn Sie ihn in den Verlaufsmodus ändern, ist er beim Öffnen leer. Ändern Sie es also in Hash oder löschen Sie die Moduskonfiguration direkt und machen Sie sie zur Standardeinstellung. Wenn Sie den Verlaufsmodus verwenden müssen, müssen Sie auf dem Server eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie eine index.html zurückgeben, also die Seite, von der Ihre App abhängt.

// mode: 'history' // 默认hash

Wenn Sie nicht wissen, wie man das Vue-Projekt verpackt, lesen Sie bitte ein weiteres ausführliches Tutorial, das ich geschrieben habe: Vue Webapp-Projekt packt native APP über HBulider

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem der leeren Seite nach der Weiterleitung der Verpackung im Verlaufsmodus unter Vue

Anleitung Lösen Sie das Problem der autorisierten Vue WeChat-Anmeldung. Das Problem der Front-End- und Back-End-Trennung

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem einer leeren Seite beim Öffnen eines Vue-Projekts nach dem Packen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!