如何在Vue.js中添加额外的js脚本

Question

我正在创建一个网站（Laravel + Vue.js），在管理面板中，我必须附加一个脚本，它将设置checbox，但Vue不允许我添加

<script></script>

标记多个，也不显示任何错误。 我试图将脚本放在多个地方但没有发生任何事情。 我试图在没有vuejs的情况下显示它们，它们看起来像这样： 但在Vue.js他们不会出现。

任何人都可以告诉我它的解决方案吗？

代码：

<template>
...
<div class="form-group m-form__group row">
     <div class="col-lg-4" >
         <label class="col-form-label"> Active: </label>
         <input name="active" data-switch="true" type="checkbox" data-on-text="Yes"  data-off-text="No" data-on-color="success" data-off-color="danger">
    </div>
    <div class="col-lg-4" >
        <label class="col-form-label"> Confirmed: </label>
        <input name="confirmed" data-switch="true" type="checkbox"  data-on-text="Yes"  data-off-text="No" data-on-color="success" data-off-color="danger">
    </div>
    <div class="col-lg-4" >
        <label class="col-form-label"> Show in Search: </label>
        <input name="show" data-switch="true" type="checkbox" data-on-text="Yes"  data-off-text="No" data-on-color="success" data-off-color="danger">
    </div>
</div>
    ...

</template>

Below script changes checboxes to as shown above in image.
<script src="/assets/demo/default/custom/components/forms/widgets/bootstrap-switch.js"></script>

<script>
...
export default{}
</script>

Answer 1

如果您只想让一个组件使用它，那么使用require()在该组件中本地包含此js：

<script>
  const BootstrapSwitch = require('./assets/demo/default/custom/components/forms/widgets/bootstrap-switch.js')

  export default{
    ...
  }

或使用导入：

<script>
  import BootstrapSwitch from './assets/demo/default/custom/components/forms/widgets/bootstrap-switch.js'

  export default {
    ...
  }

您还可以全局导入js模块（例如在main.js）

或者只是将其作为单独的.html标记包含在<script>文件中。

确保文件的路径正确。

如果.vue组件（包含此js的组件）与assets不在同一文件夹中，请确保正确导航到该组件。

例如，如果它是2级：

../../assets/demo/default/custom/components/forms/widgets/bootstrap-switch.js