twemoji 在 .vue 组件中不起作用答案

【问题标题】：twemoji not working in .vue componenttwemoji 在 .vue 组件中不起作用
【发布时间】：2017-06-28 03:54:19
【问题描述】：

我正在尝试在我的 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)

【问题讨论】：

标签： webpack vue.js vuejs2 vue-component

【解决方案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()

```

【讨论】：