vue專案中獲取外部js，並使用其中方法

SinF發表於2019-02-16
VueJS

因為專案需要，需要從外部獲取js，然後在vus專案中使用其中的方法。

如果我們想引用一個庫，但是又不想讓webpack打包，並且又不影響我們在程式中以CMD、AMD或者window/global全域性等方式進行使用，那就可以通過配置externals。這個功能主要是用在建立一個庫的時候用的，但是也可以在我們專案開發中充分使用。

在webpack中配置externals

我自己使用的程式碼如下：

  • 第一步：在最外部的index.html檔案中，在<script>標籤中引入外部js連結
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <script src="http://********/WA.js"></script>

</head>

  • 第二步：利用了webpack中的externals特性，可以載入非打包檔案的程式碼，具體使用方法是，在build資料夾中的webpack.base.conf.js檔案中，新增externals，其中的第一個WA是定義的名稱，方便之後在其他的vue元件中引用，第二個WA是指引入js檔案的輸出名稱。

    module.exports = {
    context: path.resolve(__dirname, `../`),
    entry: {

      app: `./src/main.js`

    },
    // 核心是下面的程式碼：即通過externals引入非打包js檔案
    externals: {

      `WA`:`WA`,

    },
    ….// 下面省略

  • 第三步：在具體頁面中引用WA。比如我在我的mission.vue中，可以這樣寫：

    import WA from `WA`

這樣就可以在檔案中引用相關方法了。比如這裡就直接使用了剛剛引入的外部js中的init()方法：

  created() {
      // 初始化引入的js
      WA.init({ ui: false })
  },

相關文章