一般情况我们通过 npm XXX@XXX --save 的方式来安装组件,但是无论我们怎优化或多或少还是会增加app.js的大小.

所有有些局部页面才会使用的组建就可以通过cdn类引入了

方法一：

1.1全局配置

module.exports = {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto'
      }
    ]
  }
}

1.2局部引入

可在 pages 目录内的 .vue 文件中引用外部资源，如下所示：

<template>
  <h1>使用 jQuery 和 Roboto 字体的关于页</h1>
</template>
<script>
  export default {
    head: {
      script: [
        {
          src:
            'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
        }
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css?family=Roboto'
        }
      ]
    }
  }
</script>

2.1 局部引入

    mounted() {
      if(process.browser){
        const script = document.createElement('script')
        script.src = `https://cdn.bootcdn.net/ajax/libs/jsencrypt/2.1.0/jsencrypt.js`
        script.language = 'JavaScript'
        document.body.appendChild(script)
      }
    }

这时候就可以正常使用js里的对象了