Problème d'emballage Vite+Vue3

Créer un code tronqué pour le rapport d'erreurs

执行 pnpm run build 后报错

Raison : Le suffixe de l'image est .PNG, qui sera résolu après l'avoir changé en .png.

La page de déploiement est vide et la console signale une erreur

Une fois l'empaquetage terminé, la page déployée sur le serveur est blanche et la console s'affiche.

Raison : Le fichier vite.config.js doit configurer le champ de base et la valeur est l'emplacement du fichier statique dans le répertoire racine du serveur.

Configurer vite.config.js

export default defineConfig({
    
    
    plugins: [vue()],
    base: '/zhihu/'
})

emplacement du chemin

La page de déploiement est vide

Après avoir suivi les étapes ci-dessus, aucune erreur n'est signalée sur la console, mais la page est toujours vide.

Configurer le fichier router/index.js

const router = createRouter({
    
    
	/* 此处路径为最终页面相对服务器根目录地址 */
    history: createWebHistory('/zhihu/'),
    routes
})

Erreur de chemin d'image

Reportez-vous au traitement des ressources statiques Vite

1. Utilisez l'importation pour introduire

import imgUrl from './img.png'

2. Mettre les ressources dans le dossier public