您的位置: 首页  >  文章  >  vue开发从零到发布集成apk史上完整版

vue开发从零到发布集成apk史上完整版

分类: 文章 • 2024-04-05 16:11:48

vue开发从零到发布集成apk完整版

  • 开发环境搭建-VUE

参考：

https://www.cnblogs.com/winter92/p/7117057.html

1、安转node.js

https://www.cnblogs.com/zhouyu2017/p/6485265.html

配置环境变量--很重要

接下来建议切换到c盘外目录执行（理论上不需要）

2、基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装vue

cnpm install vue -g

安装vue命令行工具，即vue-cli 脚手架

cnpm install --global vue-cli

5、新项目的创建

打开存放新建项目的文件夹

cd E:\programData\nodeProject

vue init webpack-simple mytest

  • 开发工具-Visual Studio Code

1.下载安装、汉化

参考：https://jingyan.baidu.com/article/6d704a136d72ae28db51ca27.html

https://code.visualstudio.com/Download

2、使用Visual Studio Code创建和运行Vue项目

参考：https://jingyan.baidu.com/article/8ebacdf05f30db49f65cd524.html

npm install vue -g

npm install vue-cli -g

npm install webpack -g

————————————————

存在vue命令无法执行：

1.查看当前状态

Get-ExecutionPolicy -List

2.（1）修改CurrentUser的状态为 RemoteSigned

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

（2）修改LocalMachine的状态为 RemoteSigned

Set-ExecutionPolicy RemoteSigned LocalMachine

————————————————

vue init webpack my-first-vue-project

cd my-first-vue-project

npm install

cnpm install

npm run dev

  • 打包部署-vue前端

前置条件：开发环境和开发工具准备就绪

  1. 配置修改（已修改请忽略）

config文件夹下index.js中module.exports中的build部分的assetsPublicPath由/更改为./

vue开发从零到发布集成apk史上完整版

 

build文件夹下的utils.js文件中的

vue开发从零到发布集成apk史上完整版

 

 

  1. 编译

项目路径下输入命令 npm run build

vue开发从零到发布集成apk史上完整版

 

编译完成后会发现在项目路径文件夹下多出一个dist文件夹这里面就是编译好的文件了

vue开发从零到发布集成apk史上完整版

 

建议把编译好的文件放到特目录，ngix启动配置要指定路径(路径建议全英文 不要空格)

 

  1. 安装部署方案一--nginx安装

下载稳定版Stable

http://nginx.org/en/download.html

vue开发从零到发布集成apk史上完整版

 

解压即可：

vue开发从零到发布集成apk史上完整版

 

配置部署，编辑nginx/conf 下的nginx.conf，修改如下图：

主要就是端口以及上面编译生成文件夹dist存放路径

vue开发从零到发布集成apk史上完整版

 

启动ngix:

vue开发从零到发布集成apk史上完整版

命令行进入该文件夹，执行nginx命令，也会直接启动nginx服务器

 

访问：http://localhost:8098/

 

  • 部署集成番外篇

集成到手机端 android

1、暴露url给第三方系统

由第三方实现跳转（很多场景）

这里介绍一种mui开发apk集成的思路：亲测可行

参照以上步骤，ngix部署服务，然后在手机端集成页面

核心逻辑：

单独用hbuilder+mui搭建一个外部壳子

把页面url通过已有mui框架跳转创建plus.webview.create或者其他方式

2、直接打包为apk Hbuilder

事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目

1>，将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'

2>，执行npm run build之后生成dist文件夹

3>，打开HBuilder，文件->打开目录，如下图

vue开发从零到发布集成apk史上完整版

 

以上步骤同编译

选择刚才生成的dist目录，输入项目名称，点击完成

此时会看到HBuilder项目下多了一个W标识（表示web项目）的myApp项目，

右键菜单选择‘转换成移动‘转换成移动App’，然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了，

随后就可以利用HBuilder连接真机运行

或者发行成为原生app

hbuilder提供云打包apk功能

a）共有证书需要实名认证

b）私有证书相关：

样例：keytool -genkey -v -keystore myApp.keystore -alias myApp.keystore -keyalg RSA -validity 30000

实际：keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

说明

key

dec

keytool 

工具名称（固定写法）

)-genkey

执行的是生成数字证书操作（固定写法）

-v

打印生成证书的详细信息

-keystore myApp.keystore

生成的证书的文件名为"myApp.keystore"(根据需求，设置你的证书名)

alias myApp.keystore

证书的别名为"myApp.keystore"。(一般和上面的文件名相同，可以不同，但要记好，签名时会用(A))

-keyalg RSA

生成**文件采用的算法为RSA(固定写法)

-validity 3000

该数字证书的有效期为30000天，30000天之后该证书将失效

相关推荐