contexte de la demande
La partie A exige que le projet de livraison soit empaqueté dans un fichier .exe. Electron est utilisé ici pour réaliser cette exigence (nw.js peut également être utilisé).
Plan de mise en œuvre
Première option :
Empaquetez votre propre projet vue après la configuration appropriée, placez-le dans le fichier de démonstration officiel, modifiez le chemin d'empaquetage, puis empaquetez-le dans un fichier .exe.
Option II :
Introduisez le plug-in dans votre propre projet Vue, puis empaquetez-le.
J'ai finalement choisi l'option 1 pour répondre à cette exigence, car elle est relativement simple et rapide, mais j'ai également rencontré de nombreux problèmes dans le processus d'emballage.
Étapes de mise en œuvre
Étape 1 : Connectez-vous à votre compte GitHub (je ne me suis pas connecté à ce moment-là et le clone a échoué plusieurs fois), puis clonez la démo officielle en local via la commande suivante, puis installez le package de dépendance :
git clone https://github.com/electron/electron-quick-start
npm i // 安装依赖包Lors de l'installation de packages dépendants, j'ai rencontré le problème que la version du nœud était trop basse. Ma version de nœud était 14.16.0 à l'époque, mais la version rappelée par le terminal doit être supérieure à 14.17.5. Je recommande à tout le monde d'utiliser 16+ version
CANNOT RUN WITH NODE 14.16.0
Electron Packager requires Node >= 14.17.5.
npm ERR! code ELIFECYCLE
npm ERR! errno 1 Pour savoir comment changer dynamiquement de version de nœud, je vous recommande d'utiliser des outils de contrôle de version NVM et de nœud. Pour des tutoriels d'installation détaillés, veuillez vous référer à cet article. Tutoriel d'installation et d'utilisation de Nvm (détaillé) 1. Qu'est-ce que nvm : nvm est également appelé gestion de version node.js en anglais, qui est un outil de gestion de version nodejs. NVM et NPM sont tous deux des outils de gestion de version de node.js. Afin de résoudre l'incompatibilité de différentes versions de node.js, vous pouvez l'utiliser pour installer et changer différentes versions de node.js. 2. Désinstallez le nœud installé avant : … 
http://www.xbhp.cn/news/64284.html
Remarque : Assurez-vous de définir la source du miroir d'installation npm du nœud sur le miroir Taobao, sinon vous rencontrerez le problème d'un téléchargement npm infructueux.
Étape 2 : Après avoir installé avec succès le package de dépendances, nous configurons le projet d'empaquetage.
Modifiez d'abord le fichier vue.config.js,
module.exports = {
publicPath: './', // vue-cli3项目如果有该项配置，则将值修改为‘./’, 没有则添加
assetsPublicPath: './', // vue-cli2项目使用该配置项
} Ensuite, npm run build est empaqueté et le package dist empaqueté est directement glissé dans le répertoire racine du projet electron-quick-start , comme indiqué dans la figure.
Étape 3 : Effectuer les opérations connexes sur le démarrage rapide des électrons
Supprimez d'abord le fichier index.html sous le projet et modifiez le contenu de main.js :
# main.js
mainWindow.loadFile('index.html') // 原文件
mainWindow.loadFile('./dist/index.html') // 替换原文件Ensuite, installez les dépendances electron-packager et electron requises pour empaqueter .exe , et exécutez la commande suivante,
npm i electron-packager --save-dev 或 npm i electron-packager -D
npm i electron --save-dev 或 npm i electron -D Remarque : de nombreuses personnes rencontreront le problème de l'échec de l'installation lors de l'installation de packages dépendants. Cela est dû au problème de la source miroir. Si vous le rencontrez également, veuillez d'abord exécuter la commande suivante :
// 如果本地全局的镜像源已经是淘宝镜像，只需执行第二条命令
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/Après succès, modifiez le projet package.json en conséquence :
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ Vite App --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
},
// 如果不需要自动匹配dist文件夹下的应用图标使用该内容
"electron-packager ./ Vite App --platform=win32 --arch=x64 --overwrite"
Vite App // 这个位置是设置打包后的.exe文件名，可以自定义进行替换Enfin, exécutez la commande npm run packager pour terminer l'empaquetage. Après l'exécution, vous pouvez trouver le fichier .exe dans le répertoire indiqué sur la figure !
voici le problème
Le problème d'empaquetage est résolu, mais le fichier .exe empaqueté ne peut pas envoyer de requête réseau après l'ouverture, et la requête commence par file:///api/login , mais le service proxy local est normal.
raison:
Cela est dû à la définition de win.loadFile dans le main.js (fichier d'entrée) du projet electron-quick-start pour accéder au fichier index.html local.
function createWindow () {
// Create the browser window.
Menu.setApplicationMenu(null) // 去掉默认菜单列表
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
webSecurity: false, // 允许跨域
}
})
// Load a remote URL
mainWindow.loadURL('http://192.168.0.241:9999')
// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html')
// Open the DevTools.
mainWindow.webContents.openDevTools() // 打开调试工具
}Après avoir lu le site officiel d'électron, j'ai aussi essayé de nombreuses méthodes sur Internet, et finalement testé deux méthodes par moi-même :
première méthode :
Avant que le projet ne soit empaqueté, écrivez directement la baseUrl dans l'instance axios en tant que nom de domaine de service requis, comme suit :
const service = axios.create({
baseURL: 'https://xxx.xxx.net' + apiBaseUrl,
timeout: 15000 // 请求超时时间
})Deuxième méthode :
Injectez l'adresse du serveur directement dans le prototype de vue, comme suit :
# 这样写也是为了避免影响本地服务代理
Vue.prototype.$api = process.env.NODE_ENV === 'development' ? "/api" : "http://xxx.xxx.net/api";
# 然后修改axios实例
const service = axios.create({
baseURL: this.$api,
timeout: 15000 // 请求超时时间
})
En fait, les deux méthodes ci-dessus sont exactement les mêmes, mais la deuxième méthode considère des scénarios plus complets et est plus flexible.
trouvé le problème à nouveau
Après les opérations ci-dessus, emballez à nouveau, le problème de service est résolu, mais un nouveau problème revient. Après avoir ouvert le fichier .exe, la route du projet ne peut pas sauter.
Après enquête, le mode de routage de l'historique n'est pas pris en charge dans le fichier électronique empaqueté, seul le mode de routage par hachage est pris en charge.
Modifiez donc le modèle de routage du projet comme suit :
const router = new Router({
mode: 'hash', // history || hash
})À ce stade, tous les processus d'empaquetage du projet vue dans .exe sont vraiment terminés.
Résumer
Tout d'abord, merci les amis d'avoir lu jusqu'ici. Si vous trouvez des objections dans l'article et commentez à temps, je les corrigerai à temps. J'espère aider les amis qui rencontrent le même problème. Donnez-moi un coup de pouce.