如何在 Nuxt.js 中使用外包和可编辑的脚本？

Question

我目前正在使用 Nuxt 开发一个网站。某个javascript 文件在构建后应该是可编辑的，以更改表格的内容。有谁知道我该怎么做？

到目前为止，我尝试将javascript 文件作为插件包含在内，但没有成功。此外，我还未能尝试如下交换脚本：

<!-- my-component.vue -->
<template>
  <div>This is a Text!</div>
</template>
<script src="./my-outsourced-script.js"></script>

目前我的代码如下所示：

Bootstrap-Vue 表：

<b-table
        borderless
        striped
        hover
        responsive
        :sticky-header="stickyHeader"
        :items="folderPermissions"
        :fields="folderGroups"
      >
</b-table>

要换出的内容：

export default {
  data() {
    return {
      stickyHeader: true,
      keyword: '',
      sortBy: 'xxx',
      sortDesc: false,
      folderGroups: [
        {
          key: 'drive',
          stickyColumn: true,
          label: ' ',
          isRowHeader: true
        },
        ...
      ],
      folderPermissions: [
        {
          drive: 'Some Text',
          id: 0,
          a: 1
        },
        ...
      ]
    }
  }
}

我希望在外包的javascript 文件中的上面显示的代码中包含folderGroups 和folderPermissions，以便轻松修改它们并在网站上查看更改。

Answer 1

像您一样，或者如果您尝试使用 import { folderGroups, folderPermissions} from './my-outsourced-script.js 之类的数据导入您的 js 文件，您将无法更改文件而不重建您的 nuxt 应用程序。

尝试使用您的文件构建如下：

{
"folderGroups": [
    your datas
  ],
"folderPermissions": [
    your datas
  ]
}

在你的组件中动态导入：

data() {
  folderGroups: [],
  folderPermissions: []
},
mounted() {
  this.$http.get('/js/my-outsourced-script.json').then((response) => { // no need `assets`
    console.log(response.body)
    this.folderGroups = response.body.folderGroups
    this.folderPermissions = response.body.folderPermissions
  }, function (error) {
    console.log(error.statusText)
  })
}