前端NodeJS 部署到 Window 并以 EXE 文件运行

文章目录

  • 前言
  • 基本思路
  • 基本使用
    • 安装打包工具
    • 配置打包工具
    • 打包客户端代码
    • 服务端配置网站
    • 配套项目地址
    • 效果视频

前言

前面介绍了 NodeJs 服务器连接数据库 的基本操作,为了满足企业人可以便捷地使用,不必深入理解源代码以及复杂的部署,为此将客户端和服务端打包在一起,通过 Windows 可执行文件来运行项目。

基本思路

利用 pkg 来打包服务端的操作来打包部署客户端以及服务端。

基本使用

安装打包工具

安装服务端的打包工具 pkg

pnpm install -g pkg

配置打包工具

在项目包配置文件里面,配置 pkg 的基本信息:
package.json

{
	...
	"main": "server.js",
	"bin": "server.js",
	"pkg": {
	    "assets": [ 
	      "dist/**/*",
		  "node_modules/.pnpm/registry.npmmirror.com+@[email protected]/node_modules/open/xdg-open" 
	    ],
	    "targets": [ "node16-win-x64" ],
	    "outputPath": "dist"
	},
	"dependencies": {
		"cors": "^2.8.5",
	    "express": "^4.18.2",
	    "nodemon": "^3.0.2",
	    "tedious": "^16.6.1",
	    ...
	}
}

bin:需要被打包的脚本,即服务端 server.js 脚本文件;
pkg.assets:配置需要打包的资源;
pkg.targets:配置需要打包成的执行文件的平台;
pkg.outputPath:配置需要打包生成执行文件的输出目录;
dependencies:服务端需要用到的依赖项;
main:主模块入口文件;

打包客户端代码

打包客户端代码,会生成到 dist 目录下:

npm run build

服务端配置网站

利用服务端配置网站后,也不会存在跨域的问题,如果需要联动调试的话,也可以进行调试,只不过可能就需要设置一下跨域问题:

const express = require('express');
const path = require('path');
const app= express();
const port = 3000;

// 配置客户端打包页面的访问目录
app.use(express.static(path.join(__dirname, 'dist')));

var server = app.listen(port, () => {
    var host = server.address().address;
    console.info(`http://${host}:${port} 服务器启动成功`);
})

配套项目地址

hjhcos / toptech-node-server,请修改文件 server.js 的数据库配置

效果视频

<iframe id="93bdLiOb-1705557430650" frameborder="0" src="//i2.wp.com/live.csdn.net/v/embed/360377" allowfullscreen="true" data-mediaembed="csdn"></iframe>

NodeJS服务端打包