vue3项目打包部署服务器后swiper6控件不显示，模块样式丢失

问题描述：

最近在用vue3部署自己的个人主页，其中用到了最新版的swiper6.7.0，在本地中打开是没有任何问题的，但是当我把项目打包部署到服务器后，发现swiper6控件不显示，两侧切换卡片的按钮（Navigation）和页数小圆点（Pagination）都不显示，于是就打开浏览器控制台看了下，发现控件的HTML结构是有的，但是CSS样式却没有，于是便百度谷歌，但是依旧没能解决这个问题，最后自己折腾了一宿，终于解决了(Ｔ▽Ｔ)

---

现在直接npm i swiper安装到的是swiper7
要装6需要指定一下版本：npm i swiper@6

问题解析：

以vue项目来演示，首先我们打开node_modules包

接着找到swiper的node包=》vue文件夹=》package.json文件，里边有个"sideEffects": false，那这是什么意思呢？
可以看下webpack官网的描述：传送门。看得懵懵的，反正我的理解是：在webpack打包项目时，如果在项目中使用类似 css-loader 并 import 一个 CSS 文件，则需要将其添加到 side effect 列表中，否则打包时会误删这个文件。swiper6中用到了sass等css加载器，也并没有把用到的文件添加到sideEffects数组中，如果再用import 导入css，那么打包的时候就会这css给删了，所以这就造成了本地可以，打包线上丢失的原因。

---

解决方案：

swiper6官网模板里引用样式用的是import

  // Import Swiper styles
  import 'swiper/swiper.scss';
  import 'swiper/components/navigation/navigation.scss';
  import 'swiper/components/pagination/pagination.scss';
  import 'swiper/components/scrollbar/scrollbar.scss';

我们把引用的方式换成require形式就好了（注意一下别瞎拷代码，用了scss的）

  // Import Swiper styles
  require("swiper/swiper.scss");
  require("swiper/components/navigation/navigation.scss");
  require("swiper/components/pagination/pagination.scss");
  require("swiper/components/scrollbar/scrollbar.scss");

---

放弃swiper6吧，直接上swiper7：传送门

over ~ ~