vue-cli5遇到的一丢丢webpack的打包配置（修改视频的目录）&轮播插件swiper在vue中的使用

一丢丢webpack的打包配置

 

首先在根目录中找到vue.config.js，这就是本项目的配置文件，可以看到初始是：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

我遇到的问题：

1.需求要求把mp4视频文件打包到img文件目录下

2.打包后index.html页面报错文件路径找不到

 

第一个问题的参考文档：

1.vue-cli中webpack相关：https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7

2.webpack-chain（webpack链式配置文档）：https://github.com/neutrinojs/webpack-chain

但是此时此刻我哪知道webpack的rule里mp4是哪个？于是请教了师傅，得到了一个小tips：

3.执行 output.js这个命令，会发现根目录生成了output.js文件，打开就能看到具体的配置，可以按需复制到配置文件中进行修改

比如我搜mp4，就搜到了它的校验是在media文件夹下的，怪不得打包以后视频单独搞了个文件夹，问题解决！

 

但是其实有一个更加规范的方法，那就是用url-loader进行配置：

参考文档：https://blog.csdn.net/sinat_41212418/article/details/121914931

贴一下示例代码：

 

 

 

第二个问题：

直接百度到了，配置publicPath为"./"，直接修改资源引入的路径。

 

于是代码被改为：

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: "./",
  transpileDependencies: true,
  chainWebpack: config => {
    config.module.rule('images').test(/\.(mp4|png|jpe?g|gif|webp|avif)(\?.*)?$/)
    config.module.rule('media').test(/\.(webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
  },
})

 

其实就是把image文件的校验多加了个mp4，把原本media的校验去掉了mp4，大功告成！

 

swiper插件在vue中的使用

 

因为swiper高版本不太稳定，所以这里用了^4.5.1版本的。一开始不知道，直接下了最新版，没想到都到8.0了，干脆写了装4.0的，附上卸载和安装指定版本的代码：

npm uninstall swiper
npm uninstall vue-awesome-swiper
npm install swiper@4 --save-dev
npm install vue-awesome-swiper@3 --save-dev

 

 

再附上简单使用的代码：

<template>
  <div class="PictureBanner">
    <div class="PictureBanner-bg">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div v-for="item in imgList" class="swiper-slide" v-bind:key="item">
            <img :alt="item" :src="item" />
          </div>
        </div>
        <div class="swiper-pagination" id="pagination">
          <ul class="pagination"></ul>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.min.css';

export default {
  name: 'PictureBanner',
  data: function () {
    return {
      imgList: [
        require("./img/module6_banner_1.png"),
        require("./img/module6_banner_2.png"),
        require("./img/module6_banner_3.png"),
        require("./img/module6_banner_4.png"),
        require("./img/module6_banner_5.png"),
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      const swiper = new Swiper('.swiper-container', { // eslint-disable-line no-unused-vars
        autoplay: 3000,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-swiper-pagination-bullet',
          bulletActiveClass: 'my-swiper-pagination-bullet-active',
          clickable: true,
          renderBullet: function (index, className) {
            return (
              '<span class="' + className + '" ></span>'
            );
          },
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
    }, 1000);
  },
  methods: {
    // 自定义单页方法
    slideTo(type) {
      if (type === 'prev') {
        this.swiper.slidePrev()
      } else {
        this.swiper.slideNext()
      }

      setTimeout(() => {
        this.swiper.autoplay.start()
      }, 2000)
    },
  }
}
</script>

<style scoped>
.PictureBanner {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 8.8rem;
}

.PictureBanner-bg {
  width: 21rem;
  background: url(@/assets/descreiption_bg_6.png) no-repeat;
  background-size: contain;
  padding-left: 1.46rem;
  box-sizing: border-box;
  padding-top: 0.6rem;
  padding-right: 1rem;
  margin: 0 auto;
}

.swiper-container {
  position: initial;
}

.swiper-button-next,
.swiper-button-prev {
  top: 47%;
  width: 2.4rem;
  height: 3.5rem;
}

.swiper-button-next {
  right: 0;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.swiper-button-next:after {
  background: transparent url(./img/module6_button_r.png) no-repeat;
  background-size: 100%;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background: transparent url(./img/module6_button_l.png) no-repeat;
  background-size: 100%;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background: transparent url(./img/module6_button_r.png) no-repeat;
  background-size: 100%;
}

.swiper-button-prev:after {
  background: transparent url(./img/module6_button_l.png) no-repeat;
  background-size: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  bottom: -2rem;
}
</style>

<style>
#pagination .my-swiper-pagination-bullet {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #999;
  background: url(./img/module6_dot_unchecked.png) no-repeat;
  background-size: 100%;
  margin: 0 0.4rem;
  background-position: center;
}

#pagination .my-swiper-pagination-bullet-active {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
  background: url(./img/module6_dot_checked.png) no-repeat;
  background-size: 100%;
  background-position: center;
}
</style>

 

相关部分的页面效果：

 

 

个人的配置是替换了左右切换箭头和分页的图标，一开始遇到pagination样式不生效的问题，后来发现是因为style标签里加了scoped（局部作用域，样式只针对单独的文件），去掉后即可生效~