身在坑中，努力出坑中...

一、在使用vue3+vite时候,只发现vue-router切换时触发此现象

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

// 应该确实是vite的兼容性bug问题

解决办法：
import { defineAsyncComponent } from 'vue'; //异步组挂载器
routes: [
    {
      path: "/",
      name: "Home",
      component: defineAsyncComponent(() => import('../views/Home.vue'));
    },
    {
      path: "/about",
      name: "About",
      component: defineAsyncComponent(() => import('../views/About.vue'));
    }
]
 

二、使用rollup打包，比如我们在自己的库中需要使用第三方库，例如jquery等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。

rollupOptions: {
      external: [
        "element-plus", 
      ],
 }

三、父组件向子组件传值，子组件需要对传过来的数据进行修改问题：

vue是单向数据流，想要直接对父组件传递过来的值进行修改是不被允许的。

解决办法
在子组件中声明一个data，然后将传递过来的值赋值给data，此时就可以进行修改操作

const tableDataList = ref([]); //用来接收传递过来的数据列表值，如果想要进行删除等操作，可间接修改props值
  onMounted(() => {
      tableDataList.value = props.tableData;  //在此生命周期钩子中将传过来的值进行赋值
      emit("update:tableData", tableDataList);  //该操作实现的是当数据一旦发生变化 就会将最新数据传递给父组件
    });

子组件如果这么写，
emit("update:tableData", tableDataList);
父组件传递值对应的写法
<service-table v-model:tableData="formState.serviceReturnParam"></service-table>

四、退出时，清除cookie

Cookie不仅仅有名字和值两个属性，还有域（domain），过期时间（expires），路径（path）等属性。 其中，不同的域、不同的路径下可以存在同样名字的cookie。

    一般我们删除cookie的方法是用一个同样名字、过期时间为过去某个时候的Cookie覆盖之。 这时就一定要搞清楚你要删除的cookie的域和路径，Cookie域和路径要一样才能被覆盖。 否则产生的效果就是那个想要被删除的Cookie具有神奇的生命力，无法被清除～～～

    另外，我发现在设置Cookie的时候，如果没有指定域名，那么设置的这个cookie的域默认为当前域，比如www.umiwi.com。 如果设置的时候指定了某个域，那么浏览器存的时候会自动在前面加.。比如PHP代码： setcookie('test','a',0,'www.umiwi.com');  那么 浏览器里面存的Cookie的域为.www.umiwi.com。 所以，最好的方式是设置Cookie的时候怎么写的，删除的时候就怎么写。  要不就会出现我遇到的情况： 明明浏览器里看有 username=longbill,域为www.umiwi.com的Cookie，但是在php里写 setcookie('username','',time()-1000,'www.umiwi.com','/'); 无法删除那个Cookie。 原因就是我删Cookie的操作其实上是发了一个新的名叫username、值为空、过期时间为过去1000秒、域为.www.umiwi.com、路径为/的Cookie。这个Cookie发到浏览器马上就过期了，什么也看不到。

五、递归

handleLoops = (arr) => {

  arr.forEach((item) => {

    for (const k in item) {

      if (k == 'redirect') {

        if (item[k] == 'noredirect') {

          if (item.children && item.children.length > 0) {

            item[k] = item.children[0].path;

          } else {

            item[k] = '';

          }

        }

      }

      if (k == 'children') {

        handleLoops(item[k]);

      }

    }

  });

  return arr;

};

六、vue3中使用定时器

let timer: any = 0;

let n = 60

timer = setInterval(()=>{

        n--;

        if (n <= 0) {

                clearInterval(timer);        

        }

}, 1000)

清除定时器时除了，clearInterval(timer);      要再次将timer = 0;

七、vue3中的复制到剪切板

使用vue-clipboard3实现复制到剪切板，首先引入：npm install --save vue-clipboard3

<template lang="html">
  <div>
    <button @click="copyInfo('我是copy的内容')">点我复制</button>
  </div>
</template>
<script lang="ts">
import useClipboard from 'vue-clipboard3'
export default {
  setup() {
    const { toClipboard } = useClipboard()
    const copyInfo = async (info) => {
      try {
        await toClipboard(info)
        ElMessage.success('复制成功')
      } catch (e) {
        ElMessage.warning('您的浏览器不支持复制：', e)
      }
    }
    return { copyInfo }
  }
}
</script>