Question

我正在尝试在我的nuxt.js启动项目中使用twemoji。但它不起作用。

组件：

<template>
  <section class="container">
      ♠️  &#x1F3C1 ♥️
  </section>
</template>

<script>
var yyy = require ('static/app.js')
yyy.xxx()
</script>

<style scoped>
img.emoji {
  margin: 0px !important;
  display: inline !important;
}
</style>

app.js

module.exports = {
  xxx: function () {
    twemoji.size = '16x16'
    twemoji.parse(document.body)
  }
}

还包括Twemoji CDN头。

但错误出现了：

Vue.js error

ReferenceError: twemoji is not defined
    at Object.xxx (__vue_ssr_bundle__:4382:5)
    at Object.<anonymous> (__vue_ssr_bundle__:2094:5)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:3845:3)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:1616:5)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:1117:69)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:4233:65)

Answer 1

来自nuxt.js的人的解决方案。

首先需要从npm安装twemoji，然后在.vue模板中安装：

```

import twemoji from 'twemoji'
var em = function () {
  if (process.BROWSER_BUILD) {
   const twemoji = require('twemoji')
    twemoji.size = '72x72'
    window.onNuxtReady(() => {
      twemoji.parse(document.body)
    })
  }
}
em()

```

twemoji在.vue组件中不起作用

1 个答案: