J'ai cherché une solution à ce problème mais cela ne fonctionne toujours pas. J'ai une application VueJS avec un routeur en mode historique

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Disons que mon domaine est https://www.root.com et que je souhaite servir cette application sur https://www.root.com/sub/ (pas un sous-domaine mais un sous-répertoire).

Voici donc les fichiers du répertoire de mon serveur

--public_html
  --sub ( I place the VueJS code here)
  --index.html (html of root.com)
  --.htaccess (file to route)

Après ça, quand je vais à https://www.root.com/sub/ . Il montre parfaitement la composante Home. Cependant, si j'entre https://www.root.com/sub/about, il affiche 404 Not Found, mais je veux qu'il affiche le composant About.

Mais la chose étrange est que si je crée un lien pour accéder au composant About dans le composant Accueil, puis lorsque je vais au composant Home en utilisant d'abord https://www.root.com/sub/, et que je clique sur le lien pour y aller au composant About. Ça marche ! Mais l'actualisation de la page ou la saisie manuelle de l'itinéraire rend 404 introuvable

Mise à jour 1 : J'ai lu dans Vue Router et ils ont dit pour éditer l'Apachae .htaccess. Donc je change comme ça, mais ça ne marche toujours pas :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Voici mon vue.config.js :

module.exports = {
  publicPath: '/sub/',
  outputDir: 'dist'
}

Après avoir fait cela, aller à la page À propos de naviguer vers index.html de public_html

Mise à jour 2 : je modifie mon .htaccess en ceci :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /sub/$1 [R=301,L]
</IfModule>

Maintenant, lorsque j'entre root.com/sub/about pour voir le composant About, il naviguera vers le composant Home dans root.com/sub.

Mise à jour 3 : Mon htaccess ressemble maintenant à ceci :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /sub/$1 [L]
</IfModule>

Et ça marche bien maintenant ! Cependant, maintenant j'ai un problème avec root.com , tous les fichiers css et js appellent toujours le fichier dans /sub au lieu du dossier racine

Est-ce que j'ai raté quelque chose quelque part ? S'il vous plaît aidez, P/s Im utilisant Hostinger pour la plate-forme d'hébergement.

2
Ngoc Tuan Lam 9 févr. 2020 à 13:09

1 réponse

Meilleure réponse

Enfin j'ai trouvé le moyen, peut-être pas le plus optimisé mais ça marche

RewriteEngine On
RewriteBase /
#### PERSISTENT CONTENT ####
DirectoryIndex index.php index.cgi index.html
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_URI} ^\/(js\/main\.js|css\/(\d+|common|site)\.css)$
RewriteCond %{REQUEST_FILENAME} !-d
#### not match sub module
RewriteRule ^((?!sub).)*$ /$1 [L,QSA]

#### This is for sub module
RewriteEngine On
RewriteBase /sub/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_URI} ^\/(js\/main\.js|css\/(\d+|common|site)\.css)$
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^((sub).*)*$ /sub/index.html [L,QSA]
2
Jake Lam 10 févr. 2020 à 05:31