两个表情符号在.vue组件中不起作用

Question

我正在尝试在我的nuxt.js starter项目中使用两个表情符号。但它不起作用。

组件：

<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)
  }
}

在head中还包含了两个表情符号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模板中安装：

```javascript

从' twemoji‘导入twemoji

var em = function () {

如果(process.BROWSER_BUILD) {

const twemoji = require('twemoji')

twemoji.size = '72x72'

window.onNuxtReady(() => {

  twemoji.parse(document.body)

})

}

}

em()