admin管理员组

文章数量:1597854

记录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
npm install -g yarn --registry=https://registry.npmmirror

npm与yarn查看与设置镜像源

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

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文件安装到手机。

本文标签： 项目vueviteHBuilderxapp

版权声明：本文标题：vite+vue创建前端项目，通过HBuilderX打包为移动端app 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1728279442a1151666.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。