Vue-cli引入外部插件

最新推荐文章于 2025-10-25 13:25:02 发布

原创最新推荐文章于 2025-10-25 13:25:02 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在Vue-cli项目中引入外部插件，包括绝对路径直接引入，通过在index.html中添加script标签，配置webpack externals，以及组件内引入。另外，还讨论了将插件文件放入项目并使用相对路径，通过设置resolve和ProvidePlugin进行路径配置和简化代码的方法。最后提到了通过npm安装插件并import的方式。

（一）绝对路径直接引入：

（1）主入口页面index.html中头部script标签引入：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=n0S34gQ0FW73Vj7X13A4y75q"></script>

（2）build/webpack.base.conf.js 中配置： externals

let webpackConfig = {
  entry: {
    app: './src/main.js'
  },
  externals: {
   'BMap': 'BMap' 
  },
  .....
}

module.exports = webpackConfig

（3）使用时，组件引入：

//引入
import BMap from 'BMap'

export default{
  data () {
    return {
      map: null,
      .....
    }
  },
  .....
  ,
  mounted () {
    this.map = new BMap.Map('allmap') // 使用
    let point = new BMap.Point(this.longitude, this.latitude) // 使用
    this.map.centerAndZoom(point, 15)
  },
  .....
}

（二）把文件下载下来，放到项目里，相对路径引入：

（1）build/webpack.base.conf.js 中配置：resolve，对路径配置别名（简化代码），且使用ProvidePlugin方法,使用了ProvidePlugin就不需要inport该插件，不使用ProvidePlugin定义，则在使用之前需要引入该插件

let webpackConfig = {
  .....,
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'jquery': path.resolve(__dirname, '../src/js/jquery.js'),
      'moment':path.resolve(__dirname, '../src/plugins/daterangepicker/moment.js'),
      'iCheck':path.resolve(__dirname, '../src/plugins/iCheck/icheck.min.js'),
      'daterangepicker': path.resolve(__dirname, '../src/plugins/daterangepicker/daterangepicker.js')
    }
  },
  plugins:[
    new webpack.ProvidePlugin({
      'moment':'moment',
      $:"jquery",
      jQuery:"jquery",
      "window.jQuery":"jquery",
      iCheck: "iCheck",
      daterangepicker: "daterangepicker"
    })
  ]
}

（三）npm安装：

能安装模块的就比较简单了，npm直接安装，或者package.json中配置，然后install; 使用时import就行