фон спроса
Сторона А требует, чтобы проект доставки был упакован в файл .exe. Для реализации этого требования здесь используется Electron (можно также использовать nw.js).
План реализации
Вариант первый:
Упакуйте свой собственный проект vue после соответствующей настройки, поместите его в официальный демонстрационный файл, измените путь упаковки, а затем упакуйте его в файл .exe.
Вариант 2:
Внедрите подключаемый модуль в свой собственный проект Vue, а затем упакуйте его.
В конце концов я выбрал вариант 1 для выполнения этого требования, потому что он относительно прост и быстр, но я также столкнулся со многими проблемами в процессе упаковки.
Этапы реализации
Шаг 1: Войдите в свою учетную запись GitHub (в то время я не входил в систему, и клон несколько раз терпел неудачу), затем клонируйте официальную демонстрацию в локальную версию с помощью следующей команды, а затем установите пакет зависимостей:
git clone https://github.com/electron/electron-quick-start
npm i // 安装依赖包При установке зависимых пакетов я столкнулся с проблемой, что версия узла была слишком низкой.У меня версия узла была 14.16.0 на тот момент, но версия, которую напоминает терминал, должна быть больше, чем 14.17.5.Всем рекомендую использовать 16+ версия
CANNOT RUN WITH NODE 14.16.0
Electron Packager requires Node >= 14.17.5.
npm ERR! code ELIFECYCLE
npm ERR! errno 1 Что касается динамического переключения версий узлов, я рекомендую вам использовать NVM и инструменты управления версиями узлов.Подробные руководства по установке см. в этой статье. Руководство по установке и использованию NVM на уровне няни (подробное) 1. Что такое nvm: nvm также называется управлением версиями node.js на английском языке, который является инструментом управления версиями nodejs. И nvm, и npm являются инструментами управления версиями node.js.Чтобы устранить несовместимость различных версий node.js, вы можете использовать его для установки и переключения разных версий node.js. 2. Удалите установленный ранее узел: … 
http://www.xbhp.cn/news/64284.html
Примечание. Убедитесь, что в качестве источника зеркала установки npm для узла установлено зеркало Taobao, иначе вы столкнетесь с проблемой неудачной загрузки npm.
Шаг 2: После того, как вы успешно установите пакет зависимостей, мы настроим проект упаковки.
Сначала измените файл vue.config.js,
module.exports = {
publicPath: './', // vue-cli3项目如果有该项配置，则将值修改为‘./’, 没有则添加
assetsPublicPath: './', // vue-cli2项目使用该配置项
} Затем упаковывается npm run build, а упакованный пакет dist напрямую перетаскивается в корневой каталог проекта electronic-quick-start , как показано на рисунке.
Шаг 3: Выполните соответствующие операции на электронном быстром запуске
Сначала удалите файл index.html в рамках проекта и измените содержимое main.js :
# main.js
mainWindow.loadFile('index.html') // 原文件
mainWindow.loadFile('./dist/index.html') // 替换原文件Затем установите зависимости electronic-packager и electronic, необходимые для упаковки .exe , и выполните следующую команду:
npm i electron-packager --save-dev 或 npm i electron-packager -D
npm i electron --save-dev 或 npm i electron -D Примечание: Многие люди столкнутся с проблемой неудачной установки при установке зависимых пакетов. Это связано с проблемой зеркального источника. Если вы тоже столкнулись с этим, сначала выполните следующую команду:
// 如果本地全局的镜像源已经是淘宝镜像，只需执行第二条命令
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/После успеха измените проект package.json соответствующим образом:
"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文件名，可以自定义进行替换Наконец, выполните команду npm run packager для завершения упаковки.После выполнения вы можете найти файл .exe в каталоге, показанном на рисунке!
вот проблема
Проблема с упаковкой решена, но упакованный .exe файл не может отправить сетевой запрос после открытия, и запрос начинается с file:///api/login , но локальный прокси-сервис работает нормально.
причина:
Это вызвано установкой win.loadFile в файле main.js (файл входа) проекта electronic-quick-start для доступа к локальному файлу index.html.
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() // 打开调试工具
}Прочитав официальный сайт электрона, я также перепробовал множество методов в Интернете и, наконец, самостоятельно протестировал два метода:
метод первый:
Прежде чем проект будет упакован, напишите baseUrl непосредственно в экземпляре axios в качестве требуемого доменного имени службы, как показано ниже:
const service = axios.create({
baseURL: 'https://xxx.xxx.net' + apiBaseUrl,
timeout: 15000 // 请求超时时间
})Способ второй:
Вставьте адрес сервера непосредственно в прототип vue следующим образом:
# 这样写也是为了避免影响本地服务代理
Vue.prototype.$api = process.env.NODE_ENV === 'development' ? "/api" : "http://xxx.xxx.net/api";
# 然后修改axios实例
const service = axios.create({
baseURL: this.$api,
timeout: 15000 // 请求超时时间
})
По сути, два вышеуказанных метода совершенно одинаковы, но второй метод рассматривает более комплексные сценарии и является более гибким.
снова нашел проблему
После вышеперечисленных операций снова упаковать, сервисная проблема решена, но опять возникает новая проблема. После открытия файла .exe переход по маршруту проекта невозможен.
После расследования режим маршрутизации истории не поддерживается в электронном пакетном файле, поддерживается только режим маршрутизации хэшей.
Итак, измените шаблон маршрутизации проекта следующим образом:
const router = new Router({
mode: 'hash', // history || hash
})На этом все процессы упаковки проекта vue в .exe действительно завершены.
Подведем итог
Прежде всего спасибо друзья что дочитали до этого места.Если вы найдете какие-либо возражения в статье и вовремя прокомментируете, я вовремя их исправлю.Надеюсь помочь друзьям столкнувшимся с такой же проблемой.Дайте мне палец вверх.