vue3.0+vue-router4.0 +vite2.0+jsx踩坑和心得（一直更新中）

1.data?.info?.name

一般我们获取数据对象下的属性下的属性，写法为：data && data.info && data.info.name，常用简写 data?.info?.name这种?.的写法在X5内核浏览器（eg:QQ浏览器）或者手机浏览器打开PC网页的时候会报错，如图1所示，具体原因未知，解决方案未知，若有大神有好的解决方案或者知道原因的麻烦点醒我哈。

图1

发现解决方案了，修改vite配置（如图2所示）

图2

2.vue-router4.0

（1）修改了addRoute添加动态路由，注意和router3区分开；

（2）beforeEach路由守卫那块没有next，可直接return值；

官方文档 https://next.router.vuejs.org/zh/api/#push

3.process环境变量

除了node环境下vite打包已经没有process环境变量，需要如下使用环境变量（图3）

图3

4.watch监听两个变量

vue2.0和vue3.0差别很大

vue2.0写法

vue3.0写法

5.provide，inject全局注入用法

必须在setup里面使用，不能放在其他地方使用

provide

import { defineComponent, onMounted, ref, provide } from 'vue'

import { RouterView } from 'vue-router'

export default defineComponent({

  name: 'App',

  setup() { 

   const isRouterAlive = ref(true) 

   const reload = () => {   

       isRouterAlive.value = false // 先关闭  

        setTimeout(() => {     isRouterAlive.value = true // 再打开      }, 300) 

    }  

  onMounted(() => {  })  

  provide('pageLoad', reload)  // 全局注入了reload函数，可在项目其他任何地方以inject引用，调用该函数

   return () => ( 

                  {            isRouterAlive.value ?  : null          }        

 

    )  },})

inject

import {  inject } from 'vue'

const reloadFn = inject('pageLoad') // 写在setup里面

reloadFn()

6.监听路由发生变化

vue2.0直接watch $route即可，但是vue3.0没有这个变量可做监听，也不可直接做监听

vue3.0+router4.0，onBeforeRouteUpdate，onBeforeRouteLeave两个钩子函数配合使用，可做到全面监听路由变化

7.Vue3 Composition API 如何替换Vue Mixins

vue3.0不推荐使用mixins,mixins目的是想实现组件之间的共享相同属性，所以将这些相同属性和方法提取到一个单独的模块，mixins混入可直接使用，缺点：命名冲突，以下我们把vue2.0和vue3.0做对比，方便快速发现两者的异常之处。

（1）vue2.0 mixins的使用

mixins通用函数集合

业务层引用

引用之后，业务层代码可以直接使用getQuestTypeMixin函数。

（2）vue3.0 Composition API的使用

mixins通用函数集合

业务层引用

引用之后，业务层代码可以直接使用btnPermissionHidden函数。

8.低版本任何浏览器打开系统空白报错

低版本浏览器会出现以下现象，原因是vite打包配置es6没有转成es5,打包会出现语法不识别现象。

图7

解决：vite.config.js中加上esTarget: ['es2015']，也无法做转换，图8原因未知，后来加了个打包插件（legacy），可以解决vue3 用vite打包的项目在低版本的谷歌或者其他浏览器下的语法报错问题。

图8

图9

图10

9.vite打包之后控制不显示console.log

vite.config.js文件中build对象里添加配置

// terser配置

    terserOptions: {

      compress: {

        // 是否删除console

        drop_console:  true

      }

    }

欢迎大家有什么其他问题随时留言，大家共同进步！！！