关于vue3.0 + vite的坑(持续更新,有问题在下面留言,解决过的我可以帮忙)
多的数不胜数,而且我也没看出来用了setup函数能解决代码是屎山的问题相继引入了vue-router,vuex,elment-ui组件库,私有方法注册等等等问题,最恐怖的还是打包的时候给你爆了一大堆错,根本打包不了package.json文件默认配置如下"scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite bu
多的数不胜数,而且我也没看出来用了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
更多推荐
所有评论(0)