Vue如何引入远程JS/css文件

Vue如何引入远程JS/css文件

• 应用场景: 比如说你在某个项目单独要使用阿里巴巴矢量图标，又不想下载，想直接使用外部资源（cdn…等），import不可以，那么你就可以使用这种方法!(方法不错记录一下)

使用Vue 的 createElement 方法：

export default {
  components: {
    "remote-css": {
      render(createElement) {
        return createElement("link", {
          attrs: { rel: "stylesheet", href: this.href },
        });
      },
      props: {
        href: { type: String, required: true },
      },
    },
    "remote-js": {
      render(createElement) {
        return createElement("script", {
          attrs: { type: "text/javascript", src: this.src },
        });
      },
      props: {
        src: { type: String, required: true },
      }
    }
  }
}

• 就是通过封装一个组件 remote-js 实现。
  然后，在页面直接调用就行 O(∩_∩)O

<remote-css href="https://at.alicdn.com/t/font_2307826_i7ewj7yiv2k.css"></remote-css>
<remote-js src="https://at.alicdn.com/t/font_2307682_is3un805urb.js"></remote-js>