我想知道如何在NuxtJS中安装和使用mathlive

Question

请帮助我，我想知道为什么它不起作用或者我是否做错了。

我 npm i mathlive 来获取输入。并且按照文档中nuxt插件的实现不起作用。

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Nuxtnumer',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['./plugins/mathlive-vue.js'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['mathlive-vue']
  },
}

将 mathlive-vue.js 文件放入插件目录中

import Vue from 'vue';
import * as Mathlive from 'mathlive';
import Mathfield from 'mathlive/dist/vue-mathlive.mjs'

Vue.use(Mathlive,Mathfield)

错误：

错误无法编译，有 1 个错误友好错误 19:26:11

./node_modules/mathlive/dist/vue-mathlive.mjs 友好错误 19:26:11 中出现错误

模块解析失败：意外的令牌 (2:342) 友好错误 19:26:11
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders | /** MathLive 0.69.11 */

Answer 1

我没有专门使用过 mathlive，但我读了你的问题并怀疑：

transpile: ['mathlive-vue']

应该是：

transpile: ['vue-mathlive']

因为输出具体抱怨 ./node_modules/mathlive/dist/vue-mathlive.mjs 。

我启动了一个快速应用程序，并能够通过复制您的转译配置来重新创建您的错误。切换到 vue-mathline 解决了我的错误。

如果您（或发现此问题的任何其他人）想知道发生了什么 - mathlive 代码使用 ES 模块，该模块无法在 Node（Nuxt 应用程序的服务器端）中执行。因此，您需要让 Nuxt 知道这些文件应该被转译（与节点兼容）才能工作。

Answer 2

我在 nuxt.config.js 中使用以下设置，没有这个我无法正确使用 mathlive。 你可以尝试一下。

  build: {
    modules: ['mathlive'],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      config.resolve.alias.vue = 'vue/dist/vue.common'
    }
  }

我从这里

得到了这个想法