脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue引入本地第三方JS库

Vue项目中如何引入本地第三方JS库

 更新时间：2023年06月23日 09:21:13   作者：不怕麻烦的鹿丸  
vue中常遇到第三方js,这篇文章主要给大家介绍了关于Vue项目中如何引入本地第三方JS库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

一、在 inde.html 中使用 script 标签来引入

1、直接引入，全局可用

ESLint 语法检测会报错：'$' is not define

// index.html
<script src="./static/jquery.js"></script>
// vue文件
export default {
    mounted () {
      /* eslint-disable */
      console.log($)
    }
}

2、在 webpack 中配置一个 externals，使用import来引入使用

ESLint 语法检测不会报错

// index.html
<script src="./static/jquery.js"></script>
// webpack配置文件
externals: {
  'jquery': 'jQuery'
}
// vue文件
import $ from 'jquery'
export default {
  mounted () {
    console.log($)
  }
}

二、在webpack中配置 alias来引入

1、使用 import 引入使用

ESLint 语法检测不会报错

// webpack 配置文件
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'jquery': resolve('static/jquery.js')
  }
}
// vue文件
import $ from 'jquery'
export default {
  mounted () {
    console.log($)
  }
}

2、不用import，但需在 webpack 配置 plugins

ESLint 语法检测会报错：'$' is not define

// webpack配置文件
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'jquery': resolve('static/jquery.js')
  }
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery'
  })
]
// vue文件
export default {
  mounted () {
    /* eslint-disable*/
    console.log($)
  }
}

三、解决ESLint报错

项目开启了 ESLint 语法检测的话，会报一个 error ：'$' is not defined。

1、在每一个使用 $ 的代码行上加 /* eslint-disable */ ，忽略该报错。

2、在根目录下的 .eslintrc.js 的rules{}中添加  'no-undef': 0  之后重启编辑器即可解决。

总结 

到此这篇关于Vue项目中如何引入本地第三方JS库的文章就介绍到这了,更多相关Vue引入本地第三方JS库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论