Question

我正在构建一个Nuxt应用程序，我正试图在我的一个页面中渲染一个ag-grid

我创建了一个名为ag-grid.js的插件：

import * as agGridEnterpise from 'ag-grid-enterprise/main'

agGridEnterpise.LicenseManager.setLicenseKey([MY_LICENSE_KEY])

在nuxt.config.js我注册了插件：

plugins: [
    //...
    {
      src: '~/plugins/ag-grid.js',
      ssr: false
    }
],

在我的页面组件中，我有：

<template>
    <ag-grid-vue ref="table" class="ag-theme-material" 
 :pinnedTopRowData="pinnedRow ? [pinnedRow] : []" :gridOptions="gridOptions" 
 :columnDefs="columnDefs" :rowData="tableData" v-show="!loadingGridData" 
 :cellValueChanged="onCellValueChanged">
    </ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'
export default {
  // ....
  components: {
    'ag-grid-vue': AgGridVue
    // ....
  }
}
</script>

但是当我渲染页面时，我收到以下错误：

TypeError: Cannot read property 'match' of undefined at Environment.webpackJsonp../node_modules/ag-grid/dist/lib/environment.js.Environment.getTheme (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\environment.js:76) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.specialForNewMaterial (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:636) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:352) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getGroupHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:368) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.setBodyAndHeaderHeights (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:1193) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.init (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:191) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>)

我得到一个Vue警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <AgGridVue>
       //....

有什么想法发生了什么？

Answer 1

ag-grid未能找到css。这就是为什么你需要这些行到你的nuxt.config.js文件：

module.exports = {
  css: [
    '@/node_modules/ag-grid/dist/styles/ag-grid.css',
    '@/node_modules/ag-grid/dist/styles/ag-theme-material.css'
  ],
build: ect...

要解决其他回答问题（比如MouseEvent错误），请将其置于构建中：

build: {
  extend (config, context) {
    config.resolve.alias['vue'] = 'vue/dist/vue.common'
  }
}

如何在Nuxt应用程序中使用ag-grid

1 个答案: