electron-vue打包,vue打包桌面程序

　　主要介绍了将vue项目打包成桌面快捷方式(电子)的方法，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

　　网上有很多相关的例子，我只是记录下自己的问题。

　　1.克隆电子的官方例子。

　　git克隆https://github.com/electron/electron-quick-start

　　2.输入项目并输入以下命令来运行项目

　　Npm安装//下载依赖包

　　Npstart//start

　　3.弹出界面

　　4.接下来，打包您的vue项目并运行npm run build。

　　5.将打包的项目复制到电子速动的根目录下。

　　6.再运行一次

　　npm开始

　　如果页面能打开，说明没问题。

　　如果该页无法打开，请单击“视图”下的“切换开发人员工具”，然后单击f12打开调试工具来检查问题。

　　错误1

　　解决1

　　因为我是用vue3加vite搭建的，所以在项目里找到了vite.config.js，修改了文件，

　　基底：。/./，这是密钥。其他的可以根据你自己的项目需求来更改。

　　从“vite”导入{ defineConfig }

　　从“路径”导入{ resolve }

　　从 @vitejs/plugin-vue 导入vue

　　从 @vitejs/plugin-vue-jsx 导入vueJsx

　　函数pathResolve(dir) {

　　return resolve(process.cwd()，.，目录)

　　}

　　//https://vitejs.dev/config/

　　导出默认定义配置({

　　基底：。/，//从/更改为。/这是电子的钥匙

　　插件：[vue()、vueJsx()]，

　　解决：{

　　别名：{

　　//@/xxxx=src/xxxx

　　@: pathResolve(src )

　　}

　　},

　　优化步骤：{

　　包括：[axios]

　　},

　　服务器：{

　　主持人：没错，

　　端口：3000，

　　代理服务器：{

　　/api: {

　　目标：“http://192.168.0.118:11499”，

　　重写：路径=path.replace(/^\/api/，)

　　}

　　}

　　},

　　构建：{

　　迷你化：“简洁”，

　　terse选项：{

　　压缩：{

　　Drop_console: true，//打包时移除控制台

　　Drop_debugger: true //打包时移除调试器

　　}

　　}

　　}

　　})

　　修改后发现还是有错误C://file …像这样，然后找了很久这个问题，因为我的项目有fect和axios读取本地文件，但是打包后找不到这些文件，修改方法也很简单。补充。/

　　像这样

　　然后重新打包vue项目，重复前面的操作。

　　如果页面可以打开，请转到步骤7。

　　7.打包成快捷方式。

　　(1)安装电子包装机包装依赖。

　　npm安装电子打包程序-保存-开发

　　(2)将命令添加到package.json(注意，这是添加到电子快速启动文件中的package.json)

　　脚本:{

　　开始:电子,

　　打包员：电子打包员。ang-1580-platform=win32-arch=x64-icon=。/favicon.ico - out=。/app-asar-app-version=1 . 0 . 0-overwrite-ignore=node _ modules-electron-version 19 . 0 . 2

　　},

　　(3)打包命令

　　npm打包程序

　　此时，项目应该有app文件夹。

　　有一个应用程序，双击打开即可，然后右键创建快捷方式，发送到桌面。

　　关于将vue项目打包成桌面快捷方式(电子)的方法的这篇文章到此为止。更多打包成电子内容的相关vue项目，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。