页面刷新后Vuex内容被清空

解决方案：刷新触发事件时将VUEX数据保存到localStorage中

ios（Safari）不支持"beforeunload"事件，要使用"pagehide"事件

  created() {
    //ios刷新时vuex信息保留
    let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isiOS) {
      //在页面刷新时将vuex里的信息保存到缓存里
      window.addEventListener("pagehide", () => {
        localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
      });
      //在页面加载时读取localStorage里的状态信息
      localStorage.getItem("messageStore") &&
        this.$store.replaceState(
          Object.assign(
            this.$store.state,
            JSON.parse(localStorage.getItem("messageStore"))
          )
        );
    } else {
      //在页面刷新时将vuex里的信息保存到缓存里
      window.addEventListener("beforeunload", () => {
        localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
      });
      //在页面加载时读取localStorage里的状态信息
      localStorage.getItem("messageStore") &&
        this.$store.replaceState(
          Object.assign(
            this.$store.state,
            JSON.parse(localStorage.getItem("messageStore"))
          )
        );
    }
  },

部分页面保活缓存

有些组件比如可下拉的列表页面，希望只第一次进入页面时调用接口获取数据，之后每次进入加载缓存数据，提高响应速度减少压力。而不是每次进入都调用接口。

解决方案

router.js：需要保活的页面在路由载荷中加keepAlive: true

	{
		name: 'newsList',
		component: NewsList,
		path: '/Home/NewsList',
		meta: {
			title: '政策资讯',
			index: 1,
			allowUnLogin: true,
			keepAlive: true
		}
	},

app.vue中，保活页面用keep-alive标签包裹的组件显示，不用保活的用没包裹的组件显示（VUE3.0的写法）

<template >
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component
        :is="Component"
        :key="$route.path"
        v-if="$route.meta.keepAlive"
      />
    </keep-alive>
    <component
      :is="Component"
      :key="$route.path"
      v-if="!$route.meta.keepAlive"
    />
  </router-view>
</template>

开发时接口调用跨域

解决方案

使用devServer进行请求转发
实际接口的地址为：https://xxx.com/xxx/Account/Login
代码中对接口请求的地址：为/api/Account/Login
配置后会检测关键字符串'/api'，在前面加上target地址，并将'/api'替换为空字符。

module.exports = {
    devServer: {
        open: true,
        https: false,
        //监测关键字进行转发
        proxy: { 
            '/api': {
                target: 'https://xxx.com/xxx/',
                //target:'http://localhost:4540/',
                ws: true,
                secure: false, //https
                changOrigin: true,  //允许跨域
                pathRewrite: {
                    '^/api': ''  //把'/api'去除
                }
            }
        }
    }
}

发布到服务器后，接口调用跨域

IIS解决方案

安装urlrewrite和Application Request Routing，实现和devServer同效果的转发

参考：

https://segmentfault.com/a/1190000014483148