Table of contents
1. Packaged as a desktop application
1. Packaged as a desktop application
1. Execute packaging in the terminal of the vux project
npm run build
2. A dist folder will appear in the project folder
It consists of these files
3. Here you need to add a package.json file
package.json contents
{
"name": "鼠标放图标上面的提示文字",
"version": "1.0.0",
"description": "应用介绍",
"main": "/index.html", // html文件的路径，就是当前文件夹那个
"nodejs":true,
"window": {
"title": "ERP",// 右边任务栏的图标放上去的提示文字 有中文会乱码显示
"icon": "./img/erp.png", // 任务栏图标路径 png格式
"toolbar": true,
"frame": true,
"position": "center",
"width": 1920,
"height": 1080,
"show_in_taskbar": true // 是否在任务栏显示图标
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dist": "build --tasks win-x86,win-x64,win-x32 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
"start": "run --x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"nwjs-builder-phoenix": "^1.15.0"
},
"build": {
"nwVersion": "0.27.5"
}
}The html file can actually be used directly without modification, but I have used other methods to package and found that the html file can be modified, so I don’t need to package the file to regenerate the desktop application in the future, so I made a modification
html file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
// 就是套个壳子，使用这个直接跳转到线上地址，这样就不用每次修改重新打包了
window.location.href = "http://erp.phadcalc.com/";
</script>
</body>
</html>The above file configuration is complete
Drag the dist folder to the editor to open the terminal
4. Repackage this new folder in the terminal
npm install //Install the dependencies required for packaging
npm run dist //package project as exe file
After completion, a dist folder will appear in this folder
5. The dist folder is the packaged desktop application
6. Open the 64-bit folder
7. Double-click the exe file to open it
2. Modify icon
But this icon is not good-looking, you need to modify the icon
Here you need to download a plugin to modify the icon
open this plugin
Drag the exe file into this
1. Click the icon on the left menu
2. Click the replace icon
3. Select a new icon to replace
4. Save
Going back to the folder, there may be an extra copy of the exe that can be deleted. The icon of the previously modified exe file has not changed, but it has actually changed. You can choose to restart the computer and open it to see the change, or you think this is you The kind you want, package it directly to others, and when others see it, it will be modified
Packing to others is to compress the package outside and give it to others, not directly to the exe file
open effect
