Question

尝试在nuxt应用程序中添加ag-grid。

我遵循以下步骤 https://www.ag-grid.com/vue-getting-started/ 和 How to use ag-grid in a Nuxt app

在nuxt.config.js中添加样式
制作了一个插件，并包含在nuxt.config.js中
创建了组件AgGridDemo.vue
在页面index.vue中包含组件

注意：请不要尝试运行这些代码段，因为我只使用它们来共享我拥有的源代码。

我的nuxt.config.js文件

require('dotenv').config()
import pkg from './package'

export default {
  mode: 'universal',

  /*
   ** Headers of the page
   */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },

  /*
   ** Global CSS
   */
  css: [
    { src: '~assets/bulma-modifications.scss', lang: 'scss' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
    { src: '~/node_modules/ag-grid-community/dist/styles/ag-grid.css',  lang: 'css' },
    { src: '~/node_modules/ag-grid-community/dist/styles/ag-theme-dark.css',  lang: 'css' }
  ],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    {
      src: '~/plugins/plugin-ag-grid.js',
      ssr: false
    },
    {
      src: '~plugins/plugin-vue-chartjs.js',
      ssr: false
    }
  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://buefy.github.io/#/documentation
    'nuxt-buefy',
    '@nuxtjs/pwa',
    '@nuxtjs/dotenv'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      config.node = {
        fs: 'empty'
      }
    }
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

我的插件plugin-ag-grid.js：

import * as agGridEnterpise from 'ag-grid-enterprise/main'
require('dotenv').config()
agGridEnterpise.LicenseManager.setLicenseKey([process.env.AG_LICENSE_KEY])

我的组件AgGridDemo.vue：

<template>
  <ag-grid-vue
    style="width: 500px; height: 500px;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
  ></ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'

export default {
  name: 'AgGridDemo',
  data() {
    return {
      columnDefs: null,
      rowData: null
    }
  },
  components: {
    AgGridVue
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: 'Make', field: 'make' },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ]

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
    ]
  }
}
</script>

最后我的页面：

<template>
  <section class="section">
    Welcome to test page
    <aggriddemo></aggriddemo>
  </section>
</template>
<script>

import AgGridDemo from '~/components/AgGridDemo'
export default {
  name: 'IndexPage',
  components: {
    AgGridDemo
  }
}
</script>

我在屏幕上出现错误，但在控制台上却没有，控制台说编译成功，但在屏幕上却显示：

SyntaxError丢失

堆栈帧

关于这种情况为什么发生以及如何解决的任何想法？

Answer 1

首先，尽管可能不会导致此错误，但是模板中的组件应为kebab大小写。 <ag-grid-demo/>。从Vue docs

您遇到的错误可能是一个ssr问题，尽管您在nuxt.config.js中指定了ssr: false，但这并不总能解决问题。

您能尝试一下吗？

<template>
  <section class="section">
    Welcome to test page
    <no-ssr>
      <ag-grid-demo></ag-grid-demo>
    </no-ssr>
  </section>
</template>

<script>
let AgGridDemo = {}
if (process.browser) {
  AgGridDemo = require('~/components/AgGridDemo')
}
export default {
  components: {
    'ag-grid-demo': AgGridDemo
  }
}
</script>

此外，顺便说一句，在nuxt.config.js中导入插件的现代方法如下。

plugins: [
  '~/plugins/plugin-ag-grid.client.js'
  //Note the .client.js This is shorthand for the following which you can also use
  src: { '~/plugins/plugin-ag-grid.js', mode: client }
]

在下一个主要版本中将不推荐使用ssr: false。参见docs

修改

如果这仍然导致错误，则可能需要将插件添加到nuxt.config.js中的build-transpile。像这样：

build: {
  ...
  transpile: [
    '/plugins',
  ],
 }

这将转换您所有的插件，但您会如何进行。不幸的是，docs对此并没有给我们太多帮助。

如果您无法做到这一点，那么老式的方法就是将组件添加到白名单中，如下所示：

//nuxt.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  /*
  ** All other config code
  */
  build: {
    extend(config, ctx) {
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^@components\\AgGridDemo.vue/] 
            // or however you regex a windows path
          })
        ]
      }
    }
  }
}

Answer 2

尝试了此处给出的所有解决方案（感谢发布）后，我设法在auxt项目using < no-ssr > tag上渲染了ag-grid并进行了动态导入（如果您愿意，请在7:40分钟解释如何做到这一点不熟悉代码分割，我强烈建议您观看整个视频）dynamic import video。

我怎么到达那里？好吧，自从安德鲁（Andrew）写道，问题可能与ssr，I switched my nuxt project into mode: 'spa'和BOOM有关！ ag-grid-vue出现了。现在的问题是，我的许多功能都是基于ssr的东西。因此，我不得不使其在srr模式下工作，但现在我知道ag-grid-vue在客户端完全可用，因此我切换回了模式：ssr并进行了以下操作：

注意：请不要尝试运行这些代码段，因为我仅使用它们来共享我拥有的源代码。

我的agGridDemo.vue

<template>
  <ag-grid-vue
    style="width: 500px; height: 500px;"
    class="ag-theme-balham"
    :columnDefs="columnDefs"
    :rowData="rowData"
  ></ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'

export default {
  name: 'ag-grid-demo',
  data() {
    return {
      columnDefs: null,
      rowData: null
    }
  },
  components: {
    AgGridVue
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: 'Make', field: 'make' },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ]

    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
    ]
  }
}
</script>

<style lang="scss">
  @import "~/node_modules/ag-grid-community/dist/styles/ag-grid.css";
  @import "~/node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
</style>

我想这里没有什么新鲜事，只是在nuxt.config.js文件中导入样式表会导致样式表无法访问（就我而言）。因此，我添加了

Nuxt和Ag Grid问题SyntaxError缺少堆栈帧

2 个答案: