网站及app部署

174 阅读4分钟

一、网站部署

将打包好的文件,即打包生成的dist目录下的文件,放到服务器下运行即可。

详细步骤来喽~

1.项目下打包build文件,大多项目都配置打包的文件生成在dist目录下。如下图: image.png

2.准备nginx服务器运行打包文件 nginx高性能反向代理服务器,可通过官网直接下载免安装应用程序:nginx.org/en/download…

下载文件如下图: image.png

3.配置nginx服务器

  • 修改conf文件夹下的配置文件nginx.conf
  • root-项目路径
  • 反向代理配置
  • 监听的端口号

image.png

二、HbuilderX打包原生App

详细步骤来喽~

1.在dcloud官网中下载 HBuilderX 极客开发工具

image.png

2.在dcloud官网的【问答社区】注册账号

因为这个软件需要注册账号,才能使用他的一些打包app功能。 image.png

image.png

3.登录账号,点击【设置】,绑定手机号及邮箱 image.png

4.打开下载好的HBuilder软件, image.png

(1)新建项目,选择【5+App】打包原生app,创建项目。 创建之后会生成一些固定的模板,不用管。删除css,img,js,index.html文件即可。 同时生成的文件中

  • manifest.json 是app的配置文件 image.png

image.png

(2)将打包好的项目复制到该项目下即可。 image.png

5.在HBuilder中,选中项目右键,选择【发行】-【原生App-云打包】 (1)选择【使用公共测试证书】 image.png

image.png

(2)修改manifest配置 (2.1)在【基础配置】中获取AppId 默认是没有的,登录之后点击重新获取就有了 image.png

(2.2)在【模块配置】中,去掉通讯录配置,因为测试不需要。需要的话就配置喽~ image.png

(2.3)真正打包需要用的图片图表都在这里配置

(3)点击【打包】 打包的时候会提示我们安装插件,安装就好。 image.png

插件安装完成,即可【打包】 image.png

点击【打包】会出现打包校验提示框,点击【继续打包】即可 image.png

控制台出现正在打包状态,说明已经开始打包 image.png

点击功能栏中的【发行】可查看打包状态

image.png

6.打包成功,生成apk文件 打包成功后项目文件夹下unpackage/release/apk 会生成apk文件,将此文件发送到手机端即可下载安装测试了

image.png

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之后,页面访问的地址变成了从根目录开始访问,现象如图: 1.jpg

原因

打包之后的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
    />