vite+vue创建前端项目，通过HBuilderX打包为移动端app

记录vite+vue创建前端项目及打包过程

目录

• 一、配置开发环境
• • 1.安装Node
  • 2.设置包管理工具
  • 3.打包工具HBuilderX
• 二、vite+vue前端项目开发
• • 1.创建项目
  • 2.开发你的项目
  • 3.打包为静态资源
• 三、打包为移动端app
• • 1.HBuilderX下载
  • 2.开发者认证
  • 3.创建5+App项目
  • 4.打包为apk
  • 5.打包为移动端其他程序
  • 6.安装

一、配置开发环境

1.安装Node

建议安装最新LTS版Nodejs，官网链接

2.设置包管理工具

包管理工具可以使用nodejs自带npm，或者用cnpm、yarn等。
npm与yarn工具需要访问国外站点，经常发生timeout错误，因此需要使用cnpm或者更换镜像源。
全局安装cnpm、yarn

npm install -g cnpm --registry=https://registry.npmmirror.com
npm install -g yarn --registry=https://registry.npmmirror.com

npm与yarn查看与设置镜像源

npm config get registry
npm config set registry https://registry.npmmirror.com/
yarn config get registry
yarn config set registry https://registry.npmmirror.com/

3.打包工具HBuilderX

二、vite+vue前端项目开发

1.创建项目

通过Vite创建项目

yarn create vite

进入项目目录

cd myproject

初始化项目

yarn

运行项目

yarn dev

到这一步就完成了项目开发环境搭建，使用浏览器打开项目网址就可浏览到前端界面，然后可以安装你需要的一些第三方库，例如
添加路由router

yarn add vue-router@4

添加element plus

yarn add element-plus

添加icon

yarn add @element-plus/icons-vue

添加axios跨域方案

yarn add axios

2.开发你的项目

使用VSCode打开项目，编辑完代码保存，vite会实时更新

3.打包为静态资源

如果直接默认打包，打包后静态资源默认为 “/” ，这样会导致找不到静态资源，最后的apk安装以后白屏。其中index.html文件如下

解决这个问题，打开vite.config.js，加入

base: './'

保存文件，进行打包

yarn build

打包以后的index.html文件根目录为 ”./“，其他assets文件夹中的js文件中的静态资源引用都会统一变成 ”./“，可以正确访问。其中index.html如下

打包后文件目录如下

三、打包为移动端app

1.HBuilderX下载

下载HBuilderX最新版本，HBuilderX是绿色软件，免安装

2.开发者认证

打包为移动端程序，需要在DCloud开发者中心完成账号注册与开发者认证

3.创建5+App项目

新建5+App，默认文件结构如下

打开项目文件夹目录，删除文件夹css、img、js，文件index.html，将yarn打包后的文件拷贝到此文件夹，如下

4.打包为apk

HBuilderX软件，运行->运行到内置浏览器，进行测试，测试结果如下

HBuilderX软件，发行->原生App-云打包，进行mainfest.json文件配置，最后按提示与指南进行打包

5.打包为移动端其他程序

略

6.安装

电脑连接手机，在HBuilderX软件中，打开unpackage->release->apk，右击apk文件安装到手机。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！