@[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
, 这点老忘记, 总是要控制台报错了, 才想起来