vue打包时报错
报错解决是引入swiper4的原因,
解决方式一:降低swiper的版本,可以用3.4.2
但是swiper和swiper4之间的区别挺大,这样子改又要去看swiper3的api,重新调整代码,诸多不便。
解决方式二:
在webpack.base.conf.js中,
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'swiper': 'swiper/dist/js/swiper.js' // 加入这一句
}
},
在alias中加入上面那句。
但是,再一次打包时又会报以下错误
这个因为我在main.js当中引入了这个样式文件,但是打包时找不到。找了一些博客,说能够将样式文件放入静态文件夹里,不需要被编译,可不可行我没有去试了,应该是可以。其他的解决方式还没找到,有其他解决方法的求告知一声。
最后我发现我需要的效果并不需要swiper的样式,因此,我直接去掉了import ‘swiper/src/swiper.less’这句,就可以打包成功了。
=========================== 2019/12/18更 =============================
使用swiper5的时候在ios11以下的手机上白屏,调试后,发现是报错:
Unexpected token: name (Dom7) [./node_modules/dom7/dist/dom7.modular.js:16,0][static/js/2.262bbb49a2
一开始同事说白屏的时候,还没想起来自己之前遇到过这个,后面再找问题的时候,找到了一些解决方法,问题似曾相识(-_-||),下面找到了其他人的博客的内容,记一下多个方法,哈哈
原文地址:Vue.js 使用 Swiper.js 在 iOS < 11 时出现错误
原因:
Swiper.js 这个 npm 包里面还使用了 dom7
和 ssr-window
,所以需要对这两个插件进行 Babel 转 ES5
解决方案
Vue CLI 2.x 下,在 build/webpack.base.config.js 文件中修改
// ... modules: { rules: [ // ... { test: /.js$/, loader: 'babel-loader', include: [ resolve('src'), resolve('test'), resolve('node_modules/swiper/dist/js/'), resolve('node_modules/webpack-dev-server/client'), // 新增 resolve('node_modules/swiper'), resolve('node_modules/dom7'), resolve('node_modules/ssr-window') ] }, // ... ] } // ...
Vue CLI 3.x 下
在 vue.config.js 中增加 transpileDependencies 配置
module.exports = { transpileDependencies: [ "swiper", "dom7", "ssr-window" ] }