vue项目打包app问题解决

一、后端接口无法访问问题

问题描述：apk已经制成，且app能打开运行，打开后，无法访问后端接口。不支持proxy的process.env.VUE_APP_BASE_API等转换代理方式，主要是跨域问题。

解决办法：使用axios时，baseURL不使用process.env.VUE_APP_BASE_API，直接使用IP/域名地址；即：baseURL: 'http://127.0.0.1:8080'。

const service = axios.create({

  // baseURL: process.env.VUE_APP_BASE_API,

  baseURL: 'http://x.x.x.x:8080',

  // 超时

  timeout: 10000

})

二、router无法跳转问题

问题描述：后端接口能访问，无法完成界面跳转，一直在首页（程序入口）。

解决办法：router的跳转模式将‘history’改为‘hash’；即 mode: 'hash'。

const router = new Router({

  // mode: 'history', // 去掉url中的#

  mode: 'hash',

  routes:

})

三、vue-router使用keep-alive相关问题与解决方案

问题描述：想用keep-alive缓存当前页面，跳转明细，返回后，仍然可以看到原封不动的数据与位置；但当前界面返回到主页面或者其他页面，或者注销账号重新登录，都会导致该页面有缓存的情况，即A->B，B->A（A有缓存，能接受）；C->A（A也有缓存，不能接受）

备注：keep-alive使用方法（以下两步即可）：

①在vue中找到router-view，修改如下（通过meta里面的keepAlive来判断是否需要缓存组件）：

    <keep-alive>

      <router-view :key="$route.name" v-if="$route.meta.keepAlive" />

    </keep-alive>

    <router-view :key="$route.name" v-if="!$route.meta.keepAlive" />

②在router/index.js，添加meta属性，与path保持平级：

{

    path: '/A',

    component: () => import('@/views/A页面'),

    meta: {

         keepAlive: true  // 设置需要缓存

    }

}

PS：网上也有很多解决办法，修改router或router/index.js，使用beforeRouteLeave等方法，个人感觉改动太大，有些麻烦，就没去用这种方法了；

解决办法：

若C->A，A不需要缓存，直接在A中使用vue的钩子函数activated()：当组件被激活时vue会自动调用；简单来说，就是需要缓存的时候，B组件跳转至A，带上参数即可，在钩子函数里判断该参数，通过配合初始化操作来实现是否销毁组件；以下两步实现：

①在A页面的activated()函数内，直接将本页面做一个类似于初始化的操作，将请求数据的条件清空，或者直接将数据清空重置；

 

②其他页面跳转至A页面，正常使用push即可，而跳转回来需要A组件不销毁，例如：B组件内，不使用routes.back()或go(-1)方法，直接使用push，带上特定的参数即可；在A页面接收到B带过来的特定flag，在钩子函数activated()内判断一下，是不是B的flag值，是就不做第一步处理，否则做第一步初始化操作。

B组件跳转A：

其他组件跳转A：