Vue打包为exe文件，通常是将Vue项目生成的web应用嵌入到一个桌面应用中，通常使用Electron这个技术来实现。Electron通过整合了Chromium和Node.js，可以让您使用Vue创建一个具有本地功能的跨平台应用程序。
在这篇文章中，我们将介绍如何将Vue项目打包到Electron中，并介绍Vue项目的路由在桌面应用中的使用原理。
1. 创建Vue项目
首先确保安装了Node.js，然后使用Vue CLI（预先安装）创建一个新的Vue项目。
```bash
$ npm install -g @vue/cli
$ vue create my-vue-app
$ cd my-vue-app
```
2. 安装Electron依赖
接下来我们需要在Vue项目中安装Electron相关依赖。
```bash
$ npm install electron --save-dev
$ npm install electron-builder --save-dev
```
3. 新建`electron`入口文件
在项目根目录下创建一个名为`background.js`的文件。这个文件作为Electron的入口文件。
```javascript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('dist/index.html');
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
4. 配置`vue.config.js`
在项目根目录下创建一个名为`vue.config.js`的文件，并在其中配置Electron。
```javascript
module.exports = {
pluginOptions: {
electronBuilder: {
mainProcessFile: "background.js",
builderOptions: {
appId: "com.example.app",
nsis: {
oneClick: false,
allowToChangeInstallationDirectory: true
},
win: {
icon: "public/app.ico"
},
dmg: {
contents: [
{
type: "link",
path: "/Applications",
x: 410,
y: 150
},
{
type: "file",
path: "${APP_PATH}",
x: 130,
y: 150
}
]
},
mac: {
icon: "public/app.icns"
},
linux: {
target: ["AppImage", "snap"],
category: "Development"
}
}
}
}
};
```
5. 修改路由模式
由于默认的Vue路由模式为`history`模式，在Electron中无法正常工作，我们需要将路由模式修改为`hash`模式。在`src/router/index.js`文件中修改：
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
// ...
];
const router = new VueRouter({
mode: 'hash', // 修改这行
base: process.env.BASE_URL,
routes
});
export default router;
```
6. 打包Vue项目
首先打包Vue项目，生成一个`dist`目录，包含了你的Vue项目生成的Web应用：
```bash
$ npm run build
```
7. 测试Electron应用
在本地使用Electron启动Vue项目进行测试。
```bash
$ npx electron background.js
```
8. 打包为exe文件
如果一切顺利，在项目根目录运行下面的命令，进行桌面应用打包。
```bash
$ npm run electron:build
```
打包完成后，在`dist_electron`目录下找到生成的exe文件。根据您的操作系统，它可能生成为.exe（Windows），.app（macOS）或.AppImage（Linux）文件。
通过Electron将Vue项目打包为exe文件后，Vue路由在桌面应用中的原理与在浏览器中相同。Electron实际上为Vue项目提供了一个Chromium浏览器环境，因此，路由和浏览器环境中的行为是一样的。只要将Vue Router的模式从`history`模式改为`hash`模式，即可在Electron应用中正常使用路由功能。
