在vue.js模板中包含外部腳本

我是Vue.js和web-pack的新手，所以我決定使用vue-cli（webpack）搭建一個初始應用程序。我試圖將一個外部腳本（例如<script src="..."）包含在全局不需要的模板中（對於每個頁面/組件），但Vue警告這不允許。在vue.js模板中包含外部腳本

我的index.html文件是類似於初始生成一個：

<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.com/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.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</body> 

</html>

我App.vue也類似於生成的一個：

<template> 
<div id="app"> 

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

</div> 
</template>

我有一個在我的路由文件中路由到/upload，該文件映射到需要dropzone.js（外部腳本）的Upload組件。我可以將它包含在我的index.html中，類似於引導程序的加載方式，但是隻有當這個組件需要時才加載每個頁面/組件，似乎並不理想。

然而，如上所述，我只是大炮它列入我的模板文件，例如：

<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.com/path/to/dropzone"></script> 
</template> 

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

<style> 
</style>

我如何可以包括只有一個組件外部腳本？

來源

2017-07-17 Ashley B

腳本標記本質上是全局性的。在模板中包含腳本標記並不是如何處理模塊系統（至少現在）。

您可以使用npm，npm install dropzone --save作爲節點模塊進行安裝。

然後將其導入到組件代碼中。

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

但是，要知道，包將包含在每一頁懸浮窗，除非你正在使用的WebPack代碼分裂功能。請參閱here瞭解有關如何使用Vue路由器拆分軟件包的官方教程。

來源

2017-07-17 13:31:28 Cobaltway

我希望會有一個辦法只能加載資源作爲模板呈現（沒有代碼與webpack分離） –

@AshleyB不，你應該使用webpack動態導入功能。 – Cobaltway

這需要在本地安裝dropzone，是否沒有任何方式將其用作外部資源？ –

可以定義將負責腳本加載並調用它在安裝或創建的鉤狀下面的方法：

<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>

來源

2017-07-17 13:49:06

請試試這個，告訴我它是否適合你。 –

它可以工作，但'method'應該是'methods'。我試圖編輯它，但它不會讓你保存，除非你至少改變了6個字符。 – Adam

在vue.js模板中包含外部腳本

回答

相關問題