angular2之打包

最近总有人问关于打包的= =有的越打越大= =……然后我只好重新测试打包截图了= =,发给大家,方便帮助需要打包的。

项目都完整之后,接下来就是令人头疼的打包问题。第一步在项目根目录下运行ng build(为了方便大家对比,所以先运行此命令),如下:


其次在运行ng build --prod --aot,截图如下:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要将 Angular 应用程序与 Electron 打包到单个可执行文件中,您可以使用 Electron Builder。以下是打包步骤: 1. 在您的 Angular 应用程序根目录中,使用 npm 安装 electron-builder。 ``` npm install electron-builder --save-dev ``` 2. 创建 Electron 主进程文件: 在您的 Angular 应用程序根目录中,创建一个名为 main.js 的新文件,并将以下代码复制到该文件中: ``` const { app, BrowserWindow } = require('electron') let win; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, allowRunningInsecureContent: (process.env.ELECTRON_ENV === 'development') } }) win.loadURL(`file://${__dirname}/dist/index.html`) win.webContents.openDevTools() win.on('closed', () => { win = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } }) ``` 这将创建一个新的 Electron 窗口,并将您的 Angular 应用程序的 index.html 文件加载到其中。 3. 在您的 Angular 应用程序根目录中,使用 Angular CLI 构建您的应用程序: 确保您已经全局安装了 Angular CLI。然后,在您的应用程序根目录中,运行以下命令: ``` ng build --prod ``` 这将在 dist/ 目录中创建一个生产构建。 4. 在您的 Angular 应用程序根目录中,创建一个名为 electron-builder.json 的新文件,并将以下代码复制到该文件中: ``` { "directories": { "output": "dist" }, "files": [ "dist/**/*" ], "electronVersion": "11.0.2", "appId": "com.example.myapp", "productName": "My App", "linux": { "target": "AppImage" }, "mac": { "target": "dmg" }, "win": { "target": "nsis" } } ``` 这将告诉 electron-builder 如何打包您的应用程序。 5. 在您的 Angular 应用程序根目录中,使用以下命令打包您的应用程序: ``` npx electron-builder build ``` 这将在 dist/ 目录中创建一个可执行文件。 注意:在打包之前,请确保您的 Angular 应用程序已经构建并且可在浏览器中正常运行。另外,如果您还没有安装 Electron,请在执行打包命令之前先进行安装。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值