记录本次将小屋升级到 vite2 + vue3 遇到的一些问题

Question

记录本次将小屋升级到 vite2 + vue3 遇到的一些问题

Answer 1

@[toc]

仓库地址: https://github.com/lincenying/mmf-blog-vite-vue3
访问地址: https://vue3.mmxiaowu.com

1. vite 打包时, 一些 css 神秘消失

1. 背景图片离奇消失

.icon-menu-articles {
    width: 12px;
    height: 12px;
    background-image: url('../images/@1x/menu-articles.png');
}

css 中有这么一段样式, 经过 vite 编译后, 背景图片属性消失了, 经过多次测试后, 将图片放到ps编辑后, 重新保存, 好了, 初步判断是vite(也可能是中间某个插件)将图片转成base64时出了问题, 但是图片在之前的 vue-cli 中是正常的, 能正常转成 base64

05.19 更新: 原因应该是把图片转成base64后, base64里包含//, windicss把base64中的//当成注释给删了, windicss@3 + vite-plugin-windicss@0.16.0-beta.17 已经解决了这个问题

2. 一大段 css 离奇消失

原文件: https://cdn.jsdelivr.net/npm/@kangc/v-md-editor@2.2.2/lib/style/base-editor.css

上面css文件中, 有个自定义font-face字体文件, 经过 vite 编译后, 从@font-face开始, 后面的代码全部消失了, vite 不支持 base64 的字体文件?

临时解决方法: 将 css 文件直接丢到 html 模板里, 通过 link 引入

04.07 更新: 经过排查, 得出的结果是使用vite-plugin-windicss插件有误造成的, 误会vite了…

05.19 更新: windicss@3 + vite-plugin-windicss@0.16.0-beta.17 已经解决了这个问题, 原因是windicss把base64中的//当成注释给删了

2. mixin 的混合问题

在 vue2 版本中, 有用 Vue.mixin 混合路由的beforeRouteEnter和beforeRouteLeave, 用于记录滚动条位置和跳转滚动位置
在 vue3 版本中, 用 app.mixin 混合路由的beforeRouteEnter和beforeRouteLeave, 却发现方法里的逻辑不执行! 然而在混合里的 mounted 之类生命周期里的逻辑却能正常运行, 把beforeRouteEnter和beforeRouteLeave直接放到路由组件中, 也能正常运行, 这就很迷了

另外, 也可以用路由提供的API, 但是只有提供onBeforeRouteUpdate和onBeforeRouteLeave, 没有提供onBeforeRouteEnter

3. 在组件中获取实例的问题

vue3 在 setup 中, 不能使用 this, 但是 vue3 提供了getCurrentInstance, 开发的时候一直使用getCurrentInstance().ctx来操作实例, 但是在 prod 环境发现全部失效了, 从源代码中可发现, ctx 只能用于开发环境, 源代码地址: https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/component.ts#L486-L490

其实 vue3 提供了大量的 API, 大部分情况不通过实例也是够用了, 比如:
this.$store=>useStore(),
this.$route=>useRoute(),
this.$router=>useRouter()

但是, 是在很想用 ctx 怎么办?

目前还是有方法的:

import { getCurrentInstance } from 'vue'

setup() {
    const ins = getCurrentInstance()
    const $ctx = ins.appContext.config.globalProperties
    const $type = ins.type
}

$ctx 可以访问到不少实例里的方法, $type 可以访问到 vue2 实例里的 $options, 但是不推荐使用, 能用API的情况下还是用API

4. vue3 中不再能用过滤器

曲线救国方法:

app.config.globalProperties.$filters = {
    avatar: url => {
	return 'http://www.baidu.com/' + url
    }
}

然后将模板中的:src="avatar.href | avatar"改成:src="$filters.avatar(avatar.href)"

5. 计算属性

通过computed得到的值, 依然是ref对象, 所以在 setup 中使用时, 需要加.value, 这点老忘记, 总是要控制台报错了, 才想起来