一、网站部署
将打包好的文件,即打包生成的dist目录下的文件,放到服务器下运行即可。
详细步骤来喽~
1.项目下打包build文件,大多项目都配置打包的文件生成在dist目录下。如下图:
2.准备nginx服务器运行打包文件 nginx高性能反向代理服务器,可通过官网直接下载免安装应用程序:nginx.org/en/download…
下载文件如下图:
3.配置nginx服务器
- 修改conf文件夹下的配置文件nginx.conf
- root-项目路径
- 反向代理配置
- 监听的端口号
二、HbuilderX打包原生App
- 官方文档 www.dcloud.io/
- 注册账号:dev.dcloud.net.cn
详细步骤来喽~
1.在dcloud官网中下载 HBuilderX 极客开发工具
2.在dcloud官网的【问答社区】注册账号
因为这个软件需要注册账号,才能使用他的一些打包app功能。
3.登录账号,点击【设置】,绑定手机号及邮箱
4.打开下载好的HBuilder软件,
(1)新建项目,选择【5+App】打包原生app,创建项目。 创建之后会生成一些固定的模板,不用管。删除css,img,js,index.html文件即可。 同时生成的文件中
- manifest.json 是app的配置文件
(2)将打包好的项目复制到该项目下即可。
5.在HBuilder中,选中项目右键,选择【发行】-【原生App-云打包】
(1)选择【使用公共测试证书】
(2)修改manifest配置
(2.1)在【基础配置】中获取AppId
默认是没有的,登录之后点击重新获取就有了
(2.2)在【模块配置】中,去掉通讯录配置,因为测试不需要。需要的话就配置喽~
(2.3)真正打包需要用的图片图表都在这里配置
(3)点击【打包】
打包的时候会提示我们安装插件,安装就好。
插件安装完成,即可【打包】
点击【打包】会出现打包校验提示框,点击【继续打包】即可
控制台出现正在打包状态,说明已经开始打包
点击功能栏中的【发行】可查看打包状态
6.打包成功,生成apk文件 打包成功后项目文件夹下unpackage/release/apk 会生成apk文件,将此文件发送到手机端即可下载安装测试了
app模拟真机测试 无法请求后台服务接口
1.说明
本地的测试使用的是反向代理,可以不用管目标地址问题,但是打包成apk测试却不可以,需要使用目标地址,而且在开发的代码中无法实现跨域,打包后是找不到接口的。
2.解决方案
开发模式下配置的跨域是无效的,打包后会找不到接口。
'/propertyCmsAPI': {
target: 'http://192.168.1.111:9001/',
changeOrigin: true,
pathRewrite: {
'^/propertyCmsAPI':''
}
},
这种方法在网页端打包是没有问题的,只需要在nginx 里配置下跨域就可以访问。但是在做app时这样是访问不到数据的,因为不存在跨域的说法,打包成app后实际访问的路径就是 /api/login ,这样会找不到接口,要采用绝对路径的方式,例如:http://192.168.1.111:9001/api/login,这样才能访问,不管你怎样配置管理你的请求api,前面的访问地址这个是必须要的。
现在需要把你自己项目需要访问的目标地址加在api的前面
这就需要你把你的axios的公共请求头加上你的访问地址,然后联机测试打包apk即可。
//const baseUrl = '你的访问地址'; // 打包apk
const baseUrl = ''; // 本地测试
const instance = axios.create({
timeout: 60000,
headers: {
'Content-Type': 'application/json'
}
})
instance.defaults.baseURL = baseUrl;
Vue打包成.apk安装的过程中遇到的问题
1.运行页面空白。
说明
利用HbuilderX将VUE项目打包成apk,则会遇到一个巨大的问题,那就是apk安装之后,内容都是空白,没有一点东西,
原因
原因就是:路径问题,路径问题,路径问题(重要的事情说三篇),打包好后,所有的路径都是/开头的,/开头表示从根目录开始,
解决方案
在vue打包成dist文件前,修改vue.config.js配置文件,将打包文件的资源文件更改为当前目录下的绝对路径。
mudule.exports = {
// publicPath: '/',
publicPath: './'
}
2.首屏展示后,路由无法跳转,点击无效。
原因:
文件动态加载的资源地址404找不到
解决方案
更改vue项目中的路由模型配置:将H5的历史记录模式改为hash模式
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
// mode: 'history',
mode: 'hash'
})
export default router
3.打包之后的apk不支持location.href
说明
打包apk之后,页面访问的地址变成了从根目录开始访问,现象如图:
原因
打包之后的apk不支持window.location.href
解决方案
将window.location.href 换成 window.location.hash
4.不支持/
从根目录引入资源
说明
当页面中有用/
直接从根目录获取资源的情况,如下示例,打包之后就会找不到资源。
background-image: url(/public/pic.png);
<img
style="width:30%;"
src="/public/logo.png"
alt
/>
原因
打包之后读取的路径依旧是从根目录开始读取的绝对路径,自然找不到资源。
解决方案
改成相对路径,如下
background-image: url(../../public/pic.png);
<img
style="width:30%;"
src="../../public/logo.png"
alt
/>