Vue3学习-企微浏览器兼容问题

最新推荐文章于 2024-08-19 15:13:02 发布

韭阿哥

最新推荐文章于 2024-08-19 15:13:02 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/tglsaturn/article/details/117366008

版权

在使用Vue3开发的H5应用在企微PC版出现空白，经过排查发现是由于企微浏览器不兼容es6的async语法，导致vue-i18n模块出错。通过在vue.config.js中配置`transpileDependencies`，将vue-i18n列入编译范围，将es6转译为es5，解决了企微浏览器的兼容问题。

摘要由CSDN通过智能技术生成

背景：公司需要做一个企微H5应用，选型是vue3，于是使用vue-cli@4搭建一个vue3项目（vue3+router+vuex+sass+linter），搭建完毕后，增加了vue-i18n做国际化，本地调试正常，于是部署到测试环境，使用手机访问企微应用是正常的，但是使用企微PC版访问却是一片空白。

排查问题

起初我怀疑是不是vue3的问题，因为另一个vue2的项目（含vue-i18n国际化）在企微PC版访问是正常的，而且国际化语言切换也正常，所以我重新搭建一个vue3项目（vue3+router+vuex+sass+linter），初始化后的项目直接部署到测试服，使用企微PC版访问，页面能正常显示，所以不是vue3的问题。

那么估计就是vue-i18n的问题了，于是加上vue-i18n模块

在@/locales目录下创建i18n.js，内容如下

import { createI18n } from 'vue-i18n'
const messages = {
  en: {
    title: 'test'
  },
  'zh-CN': {
    title: '测试'
  }
}
const i18n = createI18n({
  locale: process.env.VUE_APP_I18N_LOCALE,
  // 如果根据指定的 locale 没有找到对应的资源的情况下，则会自动根据 fallbackLocale 指定的语言来寻找对应的key
  fallbackLocale: pro