关于vue3.0 + vite的坑（持续更新，有问题在下面留言，解决过的我可以帮忙）

旧城等待， 2021-09-09 03:54 303阅读 0赞

多的数不胜数,而且我也没看出来用了setup函数能解决代码是屎山的问题

# 最大的坑是第三方组件库还不支持vue3.x的问题 #

这个问题还没找到解决方案，有没有老哥知道怎么让vue2的第三方库兼容vue3项目的可以加个群讨论一下，这个坑绕不过去很多项目只能乖乖用vue2，当然一些小项目还是可以拿来练手的，尤其H5页面这种，可以预知风险的，大项目真的不推荐，你不知道哪天项目经理从哪里看来一个方案说人家做的了，你用vue3，你引不了库，芜湖van蛋

# 打包不了可能是这个问题 #

相继引入了vue-router,vuex,elment-ui组件库,私有方法注册等等等问题  
最恐怖的还是打包的时候给你爆了一大堆错,根本打包不了  
**注释一下，我在创建项目的时候用的vue-ts，默认创建vue项目，build那边就是vite build，没有&&前面的东西**  
package.json文件默认配置如下  
`"scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview" },`

完全不清楚什么vue-tsc–noEmit有什么屌用昂,反正我默认用这个命令打包就报一大堆TS语法错误纠正,最恐怖的我明明排除了node\_modules他还给我报elment-ui里面的错,我可去你麻了小杰瑞,试了半天啥方法都没用,就差自己改ts语法错了,最后我把看不懂的vue-tsc–noEmit删了留个vite build,好了,能打包了,不报错了  
`"scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" },`

# require is not defined 导致静态文件（图片）没法require引入了 #

目前为止用了各种方法都跟我说require is not defined  
require这条路被彻底封死了  
解决方案：直接把图片放到public文件里可以通过 '/图片名称’的方式访问，有点恶心心，但是解决了  
纠正一下解决方案，能用最好的肯定是用最好的  
已知vite.config.ts里有如下配置：  
`resolve: { alias: { '@': path.resolve(__dirname, 'src'), } }`  
感兴趣的同学可以去了解下resolve.alias配置做了什么，目前为止引入图片的3种方式

// 静态src，@跟resolve.alias配置有关
    <img src="@/图片路径" />
    // 动态src，直接用绝对路径
    <img :src="imageUrl || '/src/完整的图片路径.png'" />
    // 动态src，使用public文件夹下的图片
    <img :src="imageUrl || '/public文件下完整的图片路径.png'" />

顺便建了个QQ群：vue3爬坑群，感兴趣自己加 695534357