Méthode Vue pour supprimer le signe # du chemin

Tout le monde sait que vue-router a deux modes, le mode hachage et le mode historique, et celui avec # est le mode hachage. Ensuite, je vous propose une solution pour que Vue supprime le signe # dans le chemin. Les amis intéressés devraient y jeter un œil

Pendant le processus de développement, j'ai découvert que le chemin était marqué de /#/, et Je suis aussi allé sur Ça ne tombera pas, c'est moche.

Comme nous le savons tous, vue-router a deux modes, le mode hachage et le mode historique.

Celui avec # est en mode hachage.

Réglez simplement le mode du routeur sur historique

Ensuite, il y a un problème Dès que l'interface est actualisée, elle passe en 404 ! ! ! !

Après une recherche en ligne, je dois configurer l'environnement back-end.

Seule la configuration nginx est répertoriée ici. Pour les autres configurations, cliquez ici pour accéder au site officiel

Configurez d'abord config/index.js

Changez AssetsPublicPath vers le. répertoire racine

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

Puis configurez nignx

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

L'URL n'est plus a #, comme c'est parfait

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'encapsulation du composant de commutation multi-onglets Vue2.0

Écrit à l'aide de classes ES6 pour imiter Vue Un exemple de liaison bidirectionnelle

Basé sur cropper.js pour encapsuler vue afin d'implémenter la fonction de composant de recadrage d'image en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!