引言

现如今，移动应用开发已经成为了一种非常重要的技术能力。而开发跨平台app是让应用能够同时运行在不同操作系统上的一种理想方式。本篇博客将介绍如何使用Uniapp+Vite+Vue3这一组合开发跨平台app，并演示如何将应用运行到安卓模拟器进行调试。

Uniapp+Vite+Vue3介绍

• Uniapp是一个基于Vue.js开发跨平台应用的框架，它可以让你同时开发iOS、安卓、H5、以及各种小程序（如微信、支付宝等）应用。
• Vite是一个由Vue.js核心团队开发的新一代前端构建工具，它具有快速的冷启动、热模块替换和 Vue 文件支持的特点。
• Vue3是Vue.js的最新版本，它在性能和开发体验上进行了大量的改进，并引入了一些新特性（如Composition API）。

准备工作

在开始进行Uniapp+Vite+Vue3的开发之前，需要进行一些准备工作：

1. 确保安装了最新版本的Node.js和npm。
2. 使用npm全局安装uni-app-cli：npm install -g @vue/cli。
3. 在开发环境中安装虚拟机和安卓模拟器（如Genymotion）。

创建Uniapp项目

1. 在命令行中执行以下命令，用uni-app-cli创建一个新的Uniapp项目：vue create -p dcloudio/uni-preset-vue my-project。
2. 进入项目目录：cd my-project。
3. 安装依赖：npm install。
4. 启动开发服务器：npm run dev。

配置Vite

1. 在项目根目录下创建一个 vite.config.js 文件，并添加以下内容：

import { defineConfig } from 'vite'

export default defineConfig({
  base: './'
})

2. 修改 package.json 文件中的 scripts 字段，将 dev 命令改为 vite：

"scripts": {
  "vite": "vite"
}

3. 重新启动开发服务器：npm run vite。

将应用运行到安卓模拟器

1. 在开发服务器启动后，找到生成的localhost地址（如：http://localhost:3000/），并复制该地址。
2. 打开安卓模拟器，启动一个安卓设备。
3. 在命令行中运行以下命令，将应用运行到安卓模拟器上：

adb connect 127.0.0.1:62001
npm run vite --host

4. 在模拟器上打开浏览器，并访问复制的localhost地址。

结语

本文介绍了如何使用Uniapp+Vite+Vue3开发跨平台app，并演示了将应用运行到安卓模拟器进行调试的方法。希望通过本文的介绍，你能够更好地使用这些技术来进行跨平台应用的开发，并提升你的移动应用开发能力。

参考文献

• Uniapp官方文档
• Vite官方文档
• Vue.js官方文档

本文来自极简博客，作者：墨色流年，转载请注明原文链接：Uniapp Vite Vue3开发跨平台app，运行到安卓模拟器调试方法