vue打包上线过程

最新推荐文章于 2025-05-08 18:51:56 发布

Halo小武

最新推荐文章于 2025-05-08 18:51:56 发布

阅读量455

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE基础学习

本文链接：https://blog.youkuaiyun.com/qq_39020164/article/details/93209779

VUE基础学习专栏收录该内容

6 篇文章

订阅专栏

博主开发单次测试模块并将其用web - view内嵌到微信小程序，遇到两个问题。一是微信小程序环境判断时，使用weixin - js - SDK封装函数获取返回值为undefined，因异步请求，最终直接在代码里判断；二是vue打包mode设为history，若文件不在服务器根目录需后台配置路径，打包后访问地址含router设置的base和path。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

微信小程序环境判断
当在小程序中引入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发送的是异步请求,所以在取值时出现取不到的情况.最后处理方法是直接在代码里判断.

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中设置。