Comment résoudre le problème de la page blanche lors de l'ouverture d'un projet vue après l'empaquetage

Cet article présente principalement la solution pour ouvrir l'espace vide après avoir empaqueté le projet Vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

De nombreuses personnes sur Internet disent que les fichiers de liste générés en empaquetant leurs projets VUE via Webpack sont empaquetés dans HBulider, puis ouverts sur le téléphone mobile et qu'ils sont vides. La principale raison en est le problème du chemin.

1. N'oubliez pas de changer le chemin d'exportation du module bulid dans index.js sous config. Étant donné que le contenu de index.html est introduit via des balises de script et que votre chemin est erroné, il sera définitivement vide une fois ouvert. Jetons d'abord un coup d'œil au chemin par défaut.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

Le actif par défautPublicPath est « / » qui est le répertoire racine. Nos index.html et static sont dans le même répertoire. Il doit donc être remplacé par './'

2. Il y a encore une chose à noter. Le mode par défaut dans la configuration de routage router/index.js dans src est le hachage. Si vous le changez en mode historique, il sera vide lorsque vous l'ouvrirez. Alors changez-le en hachage ou supprimez directement la configuration du mode et faites-en la valeur par défaut. Si vous devez utiliser le mode historique, vous devez ajouter une ressource candidate sur le serveur qui couvre toutes les situations : si l'URL ne correspond à aucune ressource statique, elle doit renvoyer un index.html, qui est la page dont dépend votre application.

// mode: 'history' // 默认hash

Si vous ne savez pas comment empaqueter le projet vue, veuillez lire un autre tutoriel détaillé que j'ai écrit : Le projet Vue webapp emballe l'application native via HBulider

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

Recommandations associées :

Comment résoudre le problème de page blanche après le routage du packaging en mode Historique sous Vue

Comment résoudre le problème de la connexion autorisée à Vue WeChat Le problème de la séparation front-end et back-end

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!