So entfernen Sie die Pfadnummer in Vue

Dieses Mal zeige ich Ihnen, wie Sie die Pfadnummer in Vue entfernen. VorsichtsmaßnahmenHier ist ein praktischer Fall, schauen wir uns das an.

Wie wir alle wissen, verfügt der Vue-Router über zwei Modi: den Hash-Modus und den Verlaufsmodus.

Der mit # ist der Hash-Modus.

Stellen Sie einfach den Modus im Router auf Verlauf

Dann gibt es ein Problem. Sobald die Schnittstelle aktualisiert wird, wechselt sie auf 404! ! ! !

Nachdem ich online gesucht habe, muss ich die Back-End-Umgebung konfigurieren.

Hier wird nur die Nginx-Konfiguration aufgeführt. Für andere Konfigurationen klicken Sie hier, um zur offiziellen Website zu gelangen.

Konfigurieren Sie zuerst config/index.js.

Ändern Sie den AssetsPublicPath im Stammverzeichnis Verzeichnis

module.exports = {
  build: {
      env: require('./prod.env'),
      index: path.resolve(dirname, '../dist/index.html'),
      assetsRoot: path.resolve(dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',   // hash 模式会默认的在此处 添加为 assetsPublicPath: './'
      productionSourceMap: true,
      ...
    }
}

Dann konfigurieren Sie nignx

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

URL hat kein # mehr, wie perfekt

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Perfekte Handhabung von Ajax-Anfragen und Axios-Paketen in Vue

Element Traversal-Implementierung von Element Traversal in Detail

Das obige ist der detaillierte Inhalt vonSo entfernen Sie die Pfadnummer in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!