vue3学习之路：Vue3.x项目在企微浏览器打开空白问题

韭阿哥
1,023 阅读3分钟

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

排查问题

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

  2. 那么估计就是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: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
  messages
})
export default i18n

    在@/main.js入口文件，使用i18n

    import i18n from '@/locales/i18n'
​
createApp(App).use(router).use(i18n).mount('#app')

    本地调试正常，部署到测试服，用企微PC版本访问，页面空白！！问题找到，但是究竟是什么原因呢？秉着一颗程序员爱钻牛角尖的精神，决定好好探一探究竟。

解决问题

在此之前，我们需要引入一个工具，企业微信客户端调试工具（devtools），参考企微官方文档：企业微信客户端调试工具

确定企微已存在devtools_resources.pak后

  1. 重新启动企业微信；
  2. 按快捷键 ctrl + alt + shift + D，进入调试模式；
  3. 访问应用页面，在空白页面上点击右键，点“开发者工具（ShowDevTools）”，进入调试模式，发现页面有报错”Uncaught SyntaxError: Unexpected token function“

001.png

点进去详情，看到在Te;async function Ie(t,e)处报错，百度一番找到了原因

企微PC版浏览器不兼容es6语法，所以这里出现的async在企微PC版浏览器不支持。

问题原因找到了，那怎么去解决？既然企微PC版浏览器不兼容es6语法，那么我们把它编译成es5是不是就能解决这个问题。而这个es6代码明显是出自于vue-i18n这个第三方依赖包，于是开始搜查webpack怎么编译第三方依赖es6转es5，终于皇天不负有心人，找到了解决办法。在Vue CLI官方配置参考有这么一个配置

transpileDependencies

  • Type: Array<string | RegExp>

  • Default: []

    默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

于是在vue.config.js加上这个配置

module.exports = {
    // 如果还有其他第三方依赖包需要编译成es5,就在(vue-i18n|)里加上，用|隔开，如(vue-i18n|element-ui|vuex)
    transpileDependencies: [/node_modules[/\\\\](vue-i18n|)[/\\\\]/]
}

编译部署到测试服，试一下，果然页面又正常显示了！！至此，问题解决。

avatar
文章
阅读
粉丝