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