vue打包上线过程

最近做了一个单次测试的模块,需要使用web-view内嵌到微信小程序中,在这个过程中遇到了以下几个问题:

1. 微信小程序环境判断
   当在小程序中引入h5界面时,需要对当前环境判断,来决定登录,因此使用了weixin-js-sdk,代码如下:

					let isweixin = false
					let ua = navigator.userAgent.toLowerCase()
					let isWeixin = ua.indexOf('micromessenger') !== -1  // 判断是否是微信浏览器访问的链接
					if (isWeixin) {
					  wx.miniProgram.getEnv((res) => {  // 判断是否是微信小程序调用
					    isweixin = res.miniprogram
					  })
					} else {
					  isweixin = false
					}
					return isweixin
				}

在这个过程中,因为多个位置出现判断,因此将这个函数封装,在这个过程中出现了获取不到函数返回值的问题,isweixin()的值一直是undefined,后来发现是因为wx.miniProgram.getEnv发送的是异步请求,所以在取值时出现取不到的情况.最后处理方法是直接在代码里判断.

2. vue打包时mode设置为history出现的问题.

			export default new Router({
			  mode: 'history',
			  base: '/student/vuewordtest/',
			  routes: [
			    {
			      path: '/',
			      name: 'SelectType',
			      component: resolve => require(['@/pages/wordTest/SelectType'], resolve),
			      meta: {
			        title: '测试结果'
			      }
			    },
			    {
			      path: '/testWord',
			      name: 'TestWord',
			      component: resolve => require(['@/pages/wordTest/TestWord'], resolve),
			      meta: {
			        title: '单词测试'
			      }
			    }
			  ]
			})

mode默认值为hash，但是这是url中会有#号，这样的url存在特殊字符，不利于解析同时也不好看，因此改为hostory,在此需要说明的时，如果build之后的文件没有放在服务器根目录的话，必须要后台进行路径配置。详见vue-router官网(https://router.vuejs.org/zh/guide/essentials/history-mode.html)
3.vue打包后的访问地址http:www.***+base+path base和path均是router中设置。