最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Including external script in vue.js template - Stack Overflow

programmeradmin1浏览0评论

I'm new to Vue.js and web-pack, so I decided to use the vue-cli (webpack) to scaffold an initial application. I'm trying to include an external script (e.g <script src="...") in a template which isn't needed globally (for every page/ponent), however Vue warns that this isn't allowed.

My index.html file is similar to the initial generated one:

<html lang="en">

<head>
  <title>App</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href=".0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>

<body>
  <div id="app"></div>

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src=".1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src=".4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src=".0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

My App.vue is also similar to the generated one:

<template>
<div id="app">

  <div class="container pt-5">
    <router-view></router-view>
  </div>

</div>
</template>

I have a route to /upload in my routes file, which maps to an Upload ponent which requires dropzone.js (an external script). I could include it in my index.html, similarly to how bootstrap is loaded, however it seems less than ideal to load it for every page/ponent when only this ponent requires it.

However, as stated above, I simply cannon include it in my template file as such:

<template>
<div>
  <h2>Upload Images</h2>
  <form action="/file-upload" class="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple />
      <input type="submit" value="upload" />
    </div>
  </form>
</div>

<script src=""></script>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>  
</style>

How can I include an external script for only one ponent?

I'm new to Vue.js and web-pack, so I decided to use the vue-cli (webpack) to scaffold an initial application. I'm trying to include an external script (e.g <script src="...") in a template which isn't needed globally (for every page/ponent), however Vue warns that this isn't allowed.

My index.html file is similar to the initial generated one:

<html lang="en">

<head>
  <title>App</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>

<body>
  <div id="app"></div>

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src="https://code.jquery./jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

My App.vue is also similar to the generated one:

<template>
<div id="app">

  <div class="container pt-5">
    <router-view></router-view>
  </div>

</div>
</template>

I have a route to /upload in my routes file, which maps to an Upload ponent which requires dropzone.js (an external script). I could include it in my index.html, similarly to how bootstrap is loaded, however it seems less than ideal to load it for every page/ponent when only this ponent requires it.

However, as stated above, I simply cannon include it in my template file as such:

<template>
<div>
  <h2>Upload Images</h2>
  <form action="/file-upload" class="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple />
      <input type="submit" value="upload" />
    </div>
  </form>
</div>

<script src="https://example./path/to/dropzone"></script>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>  
</style>

How can I include an external script for only one ponent?

Share Improve this question asked Jul 17, 2017 at 13:21 AshAsh 6,7938 gold badges30 silver badges37 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

You can define a method that will be responsible for script loading and call it in the mounted or created hook like below:

<script>
      export default {
        data() {
          return {}
        },
        methods: {
          loadJs(url, callback) {
            jQuery.ajax({
              url: url,
              dataType: 'script',
              success: callback,
              async: true
            });
          }
        },
        mounted() {
          this.loadJs('url_to_someScript.js', function() {
            //Stuff to do after someScript has loaded
          });
        }
      }
</script>

Script tags are global by nature. Including scripts tag in template is not how you do with modules systems (at least for now).

You can install it as a node module using npm, npm install dropzone --save.

Then import it inside your ponent code.

import drozone from 'dropzone';
export default {
  // Component code...
}

However, be aware that the bundle will contain dropzone in every page, unless you are using webpack code splitting feature. See here for an official tutorial about how to split your bundle with Vue Router.

发布评论

评论列表(0)

  1. 暂无评论