k-cli –save-dev
“`
2. 創建 webpack 配置文件
在項目根目錄下創建 `webpack.config.js` 文件，并添加以下內容：
“`javascript
const path = require(‘path’);
module.exports = {
entry: ‘./src/main.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’
},
module: {
rules: [
{
test: /\.vue$/,
loader: ‘vue-loader’
},
{
test: /\.js$/,
loader: ‘babel-loader’,
exclude: /node_modules/
}
]
},
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’
},
extensions: [‘*’, ‘.js’, ‘.vue’, ‘.json’]
},
devServer: {
contentBase: ‘./dist’
}
};
“`
3. 打包 Vue.js 項目
在終端中輸入以下命令，即可打包 Vue.js 項目：
“`bash
npm run build
“`
打包完成后，`dist` 目錄下會生成 `bundle.js` 文件。
## 使用 Electron 打包 Vue.js 項目
在打包 Vue.js 項目完成后，我們可以使用 Electron 將其打包成可執行文件。
1. 安裝 Electron
“`bash
npm install electron –save-dev
“`
2. 創建 Electron 入口文件
在項目根目錄下創建 `main.js` 文件，并添加以下內容：
“`javascript
const { app, BrowserWindow } = require(‘electron’);
const path = require(‘path’);
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile(path.join(__dirname, ‘index.html’));
}
app.whenReady().then(() => {
createWindow();
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
linuxnetfilter });
});
ap前端可以打包exe軟件p.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});
“`
3. 創建 package.json 文件
在項目根目錄下創建 `package.json` 文件，并添加以下內容：
“`json
{
“name”: “my-electron-app”,
“version”: “1.0.0”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
}
}
“`
4. 創建 index.html 文件
在項目根目錄下創建 `index.html` 文件，并添加以下內容：
“`html
“`
5. 打包 Electron 應用程序
在終端中輸入以下命令，即可打包 Electron 應用程序：
“`bash
npm start
“`
打包完成后，會在項目根目錄下生成可執行文件。在 Windows 系統中，是 `.exe` 文件，在 macOS 系統中，是 `.app` 文件。
## 總結
本文介紹了如何使用 Electron 和 Vue.js 將 Vue.js 項目打包成可執行文件。我們首先使用 webpack 打包 Vue.js 項目，然后使用 Electron 將其打包成可執行文件。這樣，我們就可以將 Vue.js 項目部署到桌面應用程序中，以便于發布和分享。
