Varias formas de resolver problemas 404 en el modo de historial de enrutamiento de Vue

Antecedentes del problema:

vue-router utiliza de forma predeterminada el modo hash y utiliza el hash de la URL para simular una URL completa. Cuando la URL cambia, la página no se recargará. Pero si no queremos hacer hash de rutas que terminan en #, podemos usar el modo de historial de enrutamiento. Por ejemplo, la siguiente URL: Si se utiliza el modo hash, el acceso se convierte en /essentials/history-mode.html)

servidor {

listening 8888;#El puerto predeterminado es 80 , si el puerto no está ocupado y no es necesario modificarlo

server_name localhost;

root E:/vue/my_project/dist;#El dist empaquetado de vue project

ubicación / {

try_files $uri $uri/ @router #Necesita apuntar al @router a continuación; de lo contrario, la ruta de vue se actualizará en nginx y aparecerá 404

index index.html index.htm;

}

#Corresponde a @router arriba. La razón principal es que el recurso de ruta de enrutamiento no es una ruta real. , por lo que no se puede encontrar el archivo específico

# Por lo tanto, es necesario reescribirlo en index.html y luego entregarlo al enrutador para procesar el recurso solicitado

ubicación @router {

reescribe ^.*$ /index.html al final;

}

#......Otras partes se omiten

}