Vite4 主要变化

1. 为了更好地融入生态系统，升级到 Rollup 3;
2. @vitejs/plugin-vue and @vitejs/plugin-react 核心插件移出核心包；
3. 增加@vitejs/plugin-react-swc，本插件使用rust编写，比@vitejs/plugin-react编译更快

Blog：https://vitejs.dev/blog/announcing-vite4.html
CHANGELOG： https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md

更好的实现方式，也是为了解决 unocss 抒写 dark mode 下的 css 的问题

相关议题：#6

<van-form ref="form" @submit="submit">

看了package.json里面没有配置prettier，虽然用了antfu的eslint-config，但是也可以配置stylelint的自动修复吧？

可以结合uniapp吗？否则app怎么打包啊

我们知道 Vant 组件支持深色模式，通过 VanConfigProvider 组件控制，但是值得注意的是，开启 Vant 的深色模式只会影响 Vant 组件的 UI，并不会影响全局的文字颜色或背景颜色。所以需要开发人员自己实现，vue3-vant-mobile 项目采用 vueuse 的 useDark 可组合函数实现深色模式。

在具体实现当中，用户系统终端的缓存当中就有两个属性来记录当前用户的选择，分别是 vueuse-color-scheme 控制着全局文字颜色或者背景颜色，以及 app 控制着 Vant UI 组件的颜色。

不过在实际生产当中发现一些问题。当用户第一次进入应用后，应用会自动读取用户的系统首选项，比如用户的终端浏览器的外观设置是系统默认，如果当前是白天，应用字体或者背景色就变成浅色模式下的显示；如果是晚上，应用字体或者背景色就变成了深色模式下的显示。目前没有任何问题，不过如果用户手动改变了终端默认选择以后，比如从浅色换到了深色模式， 虽然 vueuse-color-scheme 的显示会立即作出响应，但是 Vant 的 UI 组件却还是之前的模式。

虽然可以通过刷新后重新执行脚本解决，不过还有其它问题。这个讲起来就比较复杂，简单讲就是应用不止一次打开过，而之前缓存了用户的选择。而这次打开造成了背景色 和 Vant 组件颜色不一致问题。打开控制面板看到vueuse-color-scheme 的值是 auto，而 app的值是深色模式，如果当前是白天，那是什么效果呢？ 背景是 浅灰色的一个色系，而 vant 组件是黑色的，非常难看。

问题定义清楚以后，解决思路也很简单，我们需要一种手段监听这个变化，然后改变 vant 主题，达成 vueuse-color-scheme 和 app 一致的效果。

您好，本项目中如何关闭eslint的git监测呀，谢谢答复！

打包成APP后,需要自动更新,有好用的自动更新组件集成吗?

导入方式
import { showConfirmDialog } from 'vant'

导入报错
The requested module '/node_modules/.vite/deps/vant.js?v=c4b8af7e' does not provide an export named 'showConfirmDialog'

配置了跨域地址http://localhost:9203/，但是依然请求前端的 http://localhost:3000

In order to rich the repo, can u add some feature e.g echarts...

如下图，如果不切换到移动端预览，下面的tabbar就会超出maxwidth，这个问题怎么解决？

有的时候一个chrome需要同事调试pc版的后台和手机版，所以想直接利用maxwidth预览，而非切换到移动端模式，不然后台那边也要来回切换？

建议增加unplugin-auto-import/vite 自动导入功能

如何修改配置，使得 html 代码块放在最上面，现在格式化后，ts代码块自动到了最上面

官网版本(v1.1.1)： postcss-px-to-viewport

warning： postcss-px-to-viewport: postcss.plugin was deprecated. 原来postcss v8以后不再支持原来的配置方式。

社区版本 三种选择：

• https://github.com/xian88888888/postcss-px-to-viewport-8-plugin
• https://github.com/philuo/postcss-px2vw
• https://github.com/Jonny-china/postcss-px-to-viewport

pnpm build:dev 本地打包测试，dist下的index.html打开空白，
控制台报错：

Access to script at 'file:///D:/assets/index-4a56b301.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

遇到个奇怪的问题，为什么我新建了vue页面后，按CTRL+S保存后，会把页面格式化为另一种格式，不知如何修改。
保存(格式化)前：

保存(格式化)后：

Antfu's Vitesse is a great project that can be used as a starting template for developing vue3 and vite apps, and his readme.md is so well written that I think this is what a template project should look like.

如题 可以考虑添加postcss-px-to-viewport 适配不同屏幕

unplugin-vue-router

我也使用了vant的主题模式,但是没有达到demo的效果

看了下代码，貌似 rem/vw 的适配都没有做

README中有写支持chrome51。

不修改直接build，页面上无内容。
修改legacy targets后build：

# vite.config.ts
       legacy({
-        targets: ['defaults', 'not IE 11'],
+        targets: ['chrome >= 51'],
       }),

页面有内容。点击暗黑模式，颜色异常：

版本号：

Details: plopjs

使用ios swift wkwebview加载dist, 无报错, 但是白屏无法加载

浏览器F12看element会很卡，一点击元素那些标签就卡，时不时浏览器变未响应

https://github.com/pengzhanbo/vite-plugin-mock-dev-server

Details：

vbenjs/vite-plugin-style-import#52

youzan/vant#10147

youzan/vant#10671

details

作者您好，这里关于mock的配置方式，我有一些不明白和不理解的地方还想学习一下，请问这里的mock/modules/prose.js中的这种导出方式，是基于什么规则实现的mock请求拦截呀，我不是很清楚其中的运行机制，此前我也去查看了下mockjs的官方文档，没有头绪，希望学习一下作者对于此中的封装**是如何的？希望能够得到恢复，谢谢！！
mock/modules/prose.js:


mock/index.js:

api中对于配置好的mock的请求：

pnpm dev开启本地服务
iOS safari 浏览器访问ip:3000会显示空白页
PC和安卓手机没问题

直接拉取带码，修改VITE_APP_PUBLIC_PATH为 VITE_APP_PUBLIC_PATH=/test/，运行yarn build打包，之后运行yarn preview看效果，发现是空白页面

如主题,引入Swipe 组件后,van-swipe-item的切换,没有渐入动画效果

vite-cjs-node-api-deprecated

新手提问，yarn build这个dist目录，打开后的页面是空白的是为啥？

An advanced list component, built on Vant List for better usability.

高级列表组件，基于Vant List 构建，具有更好的可用性。

当我使用http-server去测试运行的时候，访问的路由是404，没有找到页面

提示类组件不生效，例如 Toast Notify，不知道是不是组件没引入

因为长度不够

移除高度限制即可正常

在高度小的手机上会导致页面显示不全

Discussions

请扫码关注公号，点击“联系作者”，扫码加作者为好友（备注“vue3-vant-mobile”），通过后邀请入群

Subscriptions / 公众号