Personnaliser les chemins de fichiers dans les builds NuxtJS sans modifier les options du routeur : un guide étape par étape

Question

J'ai développé un SPA en utilisant NuxtJS (ssr : false). Après la construction, les chemins d'accès aux fichiers javascript et css sont relatifs au dossier racine du domaine plutôt qu'au dossier dist. Par exemple, <script src="/_nuxt/e247009.js"></script> entraînera une erreur du navigateur

"La ressource de "url" est bloquée en raison d'une incompatibilité de type MIME ("text/html") (X-Content-Type-Options : nosniff)."

J'ai également ce problème avec le chemin dans mes

fonts-face css. url

J'ai pu utiliser cette solution https://stackoverflow.com/a/61638555/8488702 pour résoudre l'erreur en définissant les options du routeur comme suit :

router: {
  base: './'
}

Mais maintenant un autre problème surgit, c'est que lorsque je charge le

situé dans le répertoire racine du projet nuxt router, il affiche une erreur index.html

La page est introuvable

Comment personnaliser le chemin du fichier sans modifier les options du routeur pour éviter d'endommager le routeur ?

Answer 1

OP a exécuté le projet en utilisant son IDE Webstorm, pensant que target: 'static' lui permettrait de travailler sur l'environnement local. Même s'il fonctionne en production car de véritables fichiers statiques sont générés (qui peuvent effectivement être hébergés sur un CDN), le développement moderne n'est pas si simple.

Nous avons donc vraiment besoin d'utiliser webpack-dev-server un serveur local intégré pour prendre en charge toutes les fonctionnalités puissantes du développement moderne (HMR, hachage de fichiers, SASS, etc...).

Exécution yarn dev （或 npm run dev) permettra un projet fonctionnel avec la configuration Webpack v4 configurée effectuée pour vous par l'équipe principale de Nuxt.