如何在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)
  })
}