Récemment, je suis en train de refactoriser l'ancien projet h5 écrit avec vue2 + webpack en uniapp + vue3 pour le rendre compatible avec plusieurs terminaux. Pendant cette période, il n'y a pas trop de problèmes, et je n'arrive pas à finir d'apprendre. Je n'arrive pas à finir apprentissage
Problèmes rencontrés lors du refactoring avec vue3+vite+vant
origine
Étant donné que l'ancien projet est un projet vue créé directement avec cli, sa méthode peut être empaquetée dans un projet h5 pur et peut également être empaquetée dans une application, j'ai donc pensé à
créer directement un projet vue3+vite+vant. C'est plus pratique, et les composants de vant sont également très faciles à utiliser
Mais ! Après avoir construit le projet avec succès, je veux simplement essayer de voir s'il peut être affiché normalement après avoir été empaqueté dans une application. La bonne question est que la même méthode d'empaquetage vue2+webpack peut être affichée normalement après avoir été empaquetée dans un app, mais mon nouveau projet est empaqueté Une fois l'application installée, la page est vide. Je pense que c'est parce que certaines de mes configurations ne fonctionnent pas.
Ensuite, je suis allé sur code cloud et github pour trouver un projet vue3+vite+vant complet , et j'ai constaté que le problème de l'empaquetage de leur projet dans une application existe toujours. Parmi les nombreux projets que j'ai trouvés, je me souviens qu'un seul peut afficher la page C'est aussi un projet webpack, mais les données ne peuvent pas être demandées. Le lien de ce projet est mis ici
Voici la solution au problème d'écran blanc et de ne pas demander de données :
problème d'écran blanc
J'ai également trouvé de nombreux articles sur le problème de l'écran blanc. La plupart des articles concernent la modification de la configuration du pack Web assetsPublicPath: '/'ou publicPath: './'la définition du chemin des ressources statiques.
Ensuite, j'ai découvert comment définir le problème des ressources statiques dans vite et j'ai résolu avec succès le blanc problème d'écran. Ce qui suit est le réglage rapide statique Le chemin du chemin de ressource statique :
dans vite.config.jsle fichier :
export default defineConfig({
base: './',
})
aucune donnée demandée
Après avoir été empaqueté dans une application et installé sur le téléphone mobile, aucune donnée ne peut être demandée. En effet, lorsque nous écrivons habituellement du code et déboguons, nous devons l'exécuter sur le navigateur pour l'adapter, mais le navigateur aura un domaine croisé, nous choisirons donc d'utiliser un proxy pour le résoudre. Inter-domaine, mais l'application n'est pas inter-domaine et n'a pas besoin d'utiliser un proxy
. Donc,项目打包成app前需要将代理代码注释, axios中设置baseUrl的时候,直接设置为我们要请求的地址就可以了
Empaquetez le projet h5 écrit par vue dans une application
- Cela nécessite l'aide de HbuilderX pour créer un nouveau projet 5+APP
- Une fois l'établissement réussi, nous gardons le dossier unpackage (ce fichier est utilisé pour stocker le fichier apk) et le fichier manifest.json (configuration de l'application), et d'autres répertoires peuvent être supprimés
- Après
白屏问题avoir résolu请求不到数据le problème, compressez le projet vue, copiez tous les fichiers du répertoire dist dans le projet 5+app que nous avons construit avec HbuilderX, et manifest.json dans le projet final 5+app construit avec HbuilderX dans le même répertoire La structure du
répertoire est la suivante (la configuration de chaque projet est différente, et la structure du répertoire après empaquetage est également différente, il suffit de CV tous les fichiers dans dist) :
- Empaquetez-le dans une application dans HbuilderX, c'est très simple, cliquez simplement sur HbuilderX
发行 -> 原生app(云打包) -> 打包 -> 继续, puis attendez : Si vous sélectionnez le carnet d'adresses dans
不过有一点要注意votre compte, HbuilderX permettra une série d'opérations gênantes telles que l'authentification par nom réel, donc s'il c'est toimanifest.jsonTeste-toi, ou n'as pas besoin de carnet d'adresses, ne choisis pas car c'est vraiment gênant !!!
Problèmes rencontrés dans le projet de refactoring uniapp + vue3
Pourquoi j'ai déjà écrit vue3 + vite + vant refactoring avant, pourquoi dois-je utiliser uniapp + vue3 pour refactoriser
car avant d'écrire cet article, mon problème d'écran blanc n'a pas été résolu, et puis j'ai utilisé HbuilderX pour en créer un nouveau uni -app + projet vue3
uniapp J'ai trop de problèmes... ça fait trop longtemps et je ne me souviens pas de beaucoup de choses. Un tout nouveau arrive dans le village. Je suis vraiment attaché à Q
problème d'écharts
Regardez d'abord l'image, celle de gauche est ma refactorisation et celle de droite est un ancien projet. Lorsque j'ai terminé la refactorisation, j'ai rencontré un nouveau problème avant d'être satisfait. Qui sait... Depuis que
j'utilise uniapp + vue3, son avantage est un L'ensemble de code est utilisé par plusieurs terminaux, donc quand j'ai fini de refactoriser la page d'accueil, j'ai essayé de l'exécuter sur l'applet, et j'ai signalé une erreur sans accident... La première erreur : Reason
: Cannot read property 'querySelector' of undefined
Il ne peut pas être utilisé dans l'applet ou il n'est pas querySelector
voulu dans l'applet Pour obtenir l'élément dom, j'utilise uni.createSelectorQuery()le lien uniapp sur cette API ici , puis je l'utilise uni.createSelectorQuery().select(选择器)pour obtenir l'élément dom, et la deuxième erreur survient. .
La deuxième erreur : this.dom.getContext is not a function
Raison : lors de l'initialisation des echarts, echarts.js stipule que seules les méthodes natives dom peuvent être utilisées pour obtenir des étiquettes, c'est-à-diredocument.querySelector(选择器)
Ces deux erreurs, c'est-à-dire en conflit... l'une ne peut être utilisée, l'autre pas du tout... revenez sur le site officiel d'uniapp ... à la recherche d'une solution
Lisons attentivement la partie soulignée :
la solution est d'utiliser (uCharts)[https://www.ucharts.cn/v2/#/guide/index], tout ça n'a servi à rien avant, et la vie n'est rien mais rien.. .
Je suis en arrêt de travail... J'attendrai que je le résolve plus tard, puis j'écrirai...