阅读 4066

Vue如何引入第三方js

最近遇到的问题是如何在vue中引入mui.js,通过import引入就报这个错

一看就知道mui是传统模式,没有es6的export写法,所以import引用不到,给mui加上export default mui后,是没问题了,但是浏览器中又报错

这是vue使用es6严格模式写法,任何js文件都会被强制加上use strict,怎么让mui去除严格模式,有五种方法

第一种:直接复制粘贴mui源码到index.html,index.html里的js不会被编译,这种方式简单粗暴但难看

第二种:把mui放在static目录里,static目录不会被webpack所编译,打包后的mui被移到dist/static/mui.js

第三种:如果想在需要的地方引用,在第二种方法的基础上,在webpack.base.conf.js里配置移除项使其不被编译,然后在需要的地方引入‘import mui from 'mui’

webpack.base.conf.js

externals: {
    mui: 'window.mui'
}
复制代码

第四种:直接在webpack.base.conf.js里配置别名,然后在需要的地方引入‘import mui from 'mui’

webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json','.less'],
    alias: {
        'mui': resolve('static/mui.min.js')
    }
  }
复制代码

第五种:在第四种的基础上配置plugins参数,就无需import引入,在任意组件或js中使用 webpack.base.conf.js

plugins:[
  	new webpack.ProvidePlugin({
  	    mui : 'mui'
  	})
  ]
复制代码

某组件

 mounted(){
    console.log(mui)
  }
复制代码

这是引入第三方传统模式的js遇到的问题,希望能帮助到大家!!!

文章分类
前端