时间戳

首页 > 解决方案 > 如何在 Nuxt.js 中使用外包和可编辑的脚本？

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

问题描述

我目前正在使用 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
        },
        ...
      ]
    }
  }
}

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

标签： javascriptvue.jsnuxt.jsbootstrap-vue

解决方案

像你一样，或者如果你尝试用你的数据导入你的 js 文件import { folderGroups, folderPermissions} from './my-outsourced-script.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)
  })
}

推荐阅读