Vue打包桌面程序

最新推荐文章于 2024-08-29 10:36:05 发布
最新推荐文章于 2024-08-29 10:36:05 发布
阅读量93 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/teemor/p/8227420.html
版权

开源的地址：https://github.com/electron/electron-quick-start

一、运行

1. 安装依赖

cnpm install electron --save

cnpm install electron-packager --save

2. 在Build里引入官方的入口文件Main.js将其改为electron.js

3. 在package.json里加一条指令，启动electron

 

4. npm run build

5. npm run electron_dev(如果是白屏，则需要更改config/index.js里build的绝对路径改为相对路径,然后在重新build一下，如果不想改就直接改index里的引用文件即可)

 

构建时间很长，而且用饿了么组件的反应很慢。只要能打开dist里的index.html就可以进行下一步了（如果打不开就关闭服务）

 

 二、打包

1. 更改package.json，配置打包程序

 参考文档：https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#electronversion

 
 
2. 打包程序 需要在dist目录里拿到package。然后找到入口Js文件，然后找到我们之前生成的index.html。手动赋值一个package.json
 
 
然后配置入口文件路径
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3. npm run electron_build
 
 
 
 
 
 
 
这就是我们生成的exe打包程序，打开


 
 
 
 
 
 
 
 
 
 



 

 

转载于:https://www.cnblogs.com/teemor/p/8227420.html

                

        

        




    

  


    

      

        

            

              
                
                  weixin_30387663
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Vue+Electron打包桌面应用(从零到一完整教程)

				
			

			

				

					weixin_68658847的博客
				

				

					07-15
					
					1958
					
				

			

		

		

			
				
Vue+Electron打包桌面应用(从零到一完整教程)

			
		

	



                

              
                



	

		

			

				
					
electron+vue实现桌面端程序

				
			

			

				

					gzmhxsn的博客
				

				

					02-15
					
					958
					
				

			

		

		

			
				
实现了一个基于vue框架结合Electron框架的window桌面端程序。

			
		

	



                


  
              

                


	

		

			

				
					
vue项目打包成桌面程序

				
			

			

				

					afggg_的博客
				

				

					12-12
					
					337
					
				

			

		

		

			
				
vue桌面程序打包

			
		

	





	

		

			

				
					
vue后台项目打包成桌面应用程序（.exe）

					
最新发布

				
			

			

				

					时漂亮的博客
				

				

					08-29
					
					1167
					
				

			

		

		

			
				
1、打包成功后的样子。

			
		

	



		

			
		



	

		

			

				
					
把Vue项目打包为桌面应用(最简)

				
			

			

				

					weixin_40521770的博客
				

				

					09-17
					
					7526
					
				

			

		

		

			
				
进入打包后的dist文件夹，其中x86、x64是不同系统的桌面应用，点击进入就会看到对应的exe文件。

			
		

	





	

		

			

				
					
vue项目打包为桌面应用程序

				
			

			

				

					SunQIXin的博客
				

				

					05-21
					
					2934
					
				

			

		

		

			
				
1、通过Vue-cli创建vue 项目
 vue create electron-vue-start

2、Vue项目下，命令行执行
vue add electron-builder

注意：执行过程中可能会出现错误，如果出现错误，他会提示哪条命令没有执行成功，推荐用cnpm（淘宝镜像）执行那条失败的命令
3、执行命令查看是否能运行项目
npm run electron:serve 

4、在项目根目录下添加vue.config.js配置文件，打包配置如下
module.exports = {
  //打包

			
		

	





	

		

			

				
					
Electron + vue 打包桌面操作流程详解

				
			

			

				

					10-16
				

			

		

		

			
				
本文将深入探讨如何使用这两个技术栈进行打包，以便创建桌面应用程序。首先，确保你已经有一个Vue项目，如果没有，你可以通过`vue init webpack`命令快速创建一个基础的Vue项目。  1. **安装依赖**  在Vue项目中，你...

			
		

	





	

		

			

				
					
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序

				
			

			

				

					08-28
				

			

		

		

			
				
在开发桌面应用时，`Electron`框架是...通过解决上述问题，可以成功将项目打包为可执行的`.exe`文件，实现客户端桌面程序的部署。同时，持续关注官方更新和社区资源，可以有效地解决新出现的问题，保证项目的顺利进行。

			
		

	





	

		

			

				
					
前端+将vue项目打包为桌面应用+electron学习

				
			

			

				

					04-15
				

			

		

		

			
				
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建GitHub的桌面客户端而创建的。它允许使用JavaScript、HTML和CSS等Web技术来...用途:将vue项目打包为桌面应用

			
		

	





	

		

			

				
					
Vue项目打包为桌面应用

				
			

			

				

					weixin_43764914的博客
				

				

					09-08
					
					1597
					
				

			

		

		

			
				
vue项目打包为桌面端

			
		

	





	

		

			

				
					
vue项目打包成electron桌面端exe应用（0-1保姆级教程）

				
			

			

				

					qq_52132550的博客
				

				

					07-15
					
					3059
					
				

			

		

		

			
				
vue项目打包成桌面端exe应用（0-1保姆级教程）

			
		

	





	

		

			

				
					
vue项目打包成桌面版（vue-cli）

				
			

			

				

					qq_39842563的博客
				

				

					08-30
					
					619
					
				

			

		

		

			
				
tsp_components
地址
https://www.npmjs.com/package/tsp_components
账号
monstergaotsp_components 打开终端  输入命令link在目录C:\Users\用户名\AppData\Roaming\npm\node_modules下面 可查看包这就将这个公共的项目通过软连接的方式引入到项目里面来了
这时修改vue项目下面的任意代码都会实时生效，不用打包，也不用重启
生成lib文件夹

本地调试时使用

npm发布时使用

上传
修改

			
		

	





	

		

			

				
					
2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲

				
			

			

				

					2401_84616230的博客
				

				

					05-12
					
					1731
					
				

			

		

		

			
				
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】“electron:build”: “vite build && electron-builder” // 新增打包命令。

			
		

	





	

		

			

				
					
vue打包成桌面应用

				
			

			

				

					明耀的博客
				

				

					03-19
					
					3741
					
				

			

		

		

			
				
参考先的例子
https://segmentfault.com/a/1190000011971612
https://blog.csdn.net/m0_37604745/article/details/79303342



			
		

	





	

		

			

				
					
vue项目打包桌面程序

				
			

			

				

					han_xiao_xiao的博客
				

				

					11-18
					
					978
					
				

			

		

		

			
				
cnpm run packager 出现问题：13.229.188.59:443 timeout
1.无效（×）
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver


有效

set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
cnpm run packager


...

			
		

	





	

		

			

				
					
vue打包 桌面程序

				
			

			

				

					明耀的博客
				

				

					11-05
					
					454
					
				

			

		

		

			
				
1.创建项目
 vue create electron-vue-start


2.安装electron-builder
vue add electron-builder

会报错：

解决方案：
cnpm install --loglevel error


3.运行看效果：

4、在项目根目录下添加vue.config.js配置文件，打包配置如下
module.exports = {
  //打包为应用程序配置
  pluginOptions: {
    // vue-cli-plugin-elect

			
		

	





	

		

			

				
					
vue 使用 Electron打包成桌面应用

				
			

			

				

					qq_27717857的博客
				

				

					07-24
					
					1066
					
				

			

		

		

			
				
1. cd目录到 npm run build 生成的dist文件夹

2.dist目录下新建package.json、electron.js文件，内容如下：


{
  "name": "FloorGuidance",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main&

			
		

	





	

		

			

				
					
vue项目打包成.exe桌面应用

				
			

			

				

					月兒~圓
				

				

					05-30
					
					1597
					
				

			

		

		

			
				
整理一下本人实现vue项目打包成桌面应用的流程
一、新建文件夹，使用git下载
# gitee
git clone https://gitee.com/wallace5303/electron-egg.git

# github
git clone https://github.com/wallace5303/electron-egg.git

二、进入到electron-egg
cd electron-egg-> npm install

三、把你的项目打包成dist文件，生成的dist文件把 el

			
		

	





	

		

			

				
					
vue3打包成exe程序完美

				
			

			

				

					12-15
				

			

		

		

			
				
很抱歉，Vue.js是一个JavaScript框架，无法直接打包成exe程序。但是，你可以使用Electron框架将Vue.js应用程序打包成桌面应用程序。以下是一些步骤：

1.首先，你需要安装Electron。你可以使用npm来安装它。在终端中输入以下命令：

```shell
npm install -g electron
```

2.接下来，你需要在你的Vue.js项目中安装electron-builder。在终端中输入以下命令：

```shell
npm install electron-builder --save-dev
```

3.在你的Vue.js项目中创建一个main.js文件。这个文件将作为Electron应用程序的主要进程。在这个文件中，你需要创建一个BrowserWindow对象来显示你的Vue.js应用程序。以下是一个简单的例子：

```javascript
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载Vue.js应用程序
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
```

4.在你的Vue.js项目中创建一个electron-builder的配置文件。在这个文件中，你需要指定一些打包选项，例如应用程序的名称、版本、图标等。以下是一个简单的例子：

```javascript
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Vue.js app",
  "main": "main.js",
  "author": "Me",
  "license": "MIT",
  "build": {
    "productName": "My App",
    "appId": "com.myapp",
    "directories": {
      "output": "dist_electron"
    },
    "files": [
      "dist/**/*",
      "node_modules/**/*"
    ],
    "mac": {
      "category": "public.app-category.developer-tools",
      "icon": "build/icon.icns"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png"
    }
  }
}
```

5.最后，在终端中输入以下命令来打包你的Vue.js应用程序：

```shell
electron-builder build
```

打包完成后，你将在dist_electron目录中找到你的应用程序。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值