引入swiper
import Swiper from 'swiper';
import 'swiper/css/swiper.css';
初始化图片轮播
initImage() {
const vm = this;
const mySwiper = new Swiper('.swiper-container', {
spaceBetween: 16,
slidesPerView: 3,
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true, // 修改swiper的父元素时,自动初始化swiper
preventClicksPropagation: true,
autoplay: {
delay: 1500,
disableOnInteraction: true,
}, // 可选选项,自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 滑到最后一个隐藏前进按钮
on: {
slideChangeTransitionEnd() {
if (this.isEnd) {
this.navigation.$nextEl.addClass('hide');
} else {
this.navigation.$nextEl.removeClass('hide');
}
},
},
});
// 鼠标覆盖停止自动切换
mySwiper.el.onmouseover = function () {
mySwiper.autoplay.stop();
mySwiper.navigation.$nextEl.removeClass('hide');
mySwiper.navigation.$prevEl.removeClass('hide');
};
// 鼠标离开开始自动切换
mySwiper.el.onmouseout = function () {
mySwiper.autoplay.start();
mySwiper.navigation.$nextEl.addClass('hide');
mySwiper.navigation.$prevEl.addClass('hide');
};
},
打包时报错
js/chunk-2e9a501f.85da2169.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [js/chunk-2e9a501f.85da2169.js:133,6]
我也会一脸懵逼,为什么终于要发版啦,打包出错,哭死,弱小无助,唯有度娘营救我,
UglifyJs 仅支持JavaScript(ECMAScript 5)。
怎么解决呢
transpileDependencies: [
"swiper",
"dom7",
"ssr-window"
],
transpileDependencies
Type: Array<string | RegExp>
Default: []
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
用来处理ES6语法,将其编译为浏览器可以执行的js语法。
结果
打包顺利,求大佬告知swiper内部封装了什么导致这个问题