Taro + Vite 开发中 fs.allow 配置问题分析与解决

在使用 Taro 官方脚手架初始化项目并选择 Vite 作为构建工具后,运行 npm run dev:h5 时可能会遇到如下报错:

javascript 复制代码
Failed to load url /app.ts (resolved id: D:/***/***/src/app.ts) in D:/***/***/src/app.config.ts. Does the file exist?
The request url "D:******\src\app.ts" is outside of Vite serving allow list.
- D:/***/***/node_modules/vite/dist/client

该错误是由于 Vite 开发服务器默认的安全策略限制所致,即不允许访问项目根目录之外的文件。尽管官方文档建议在 vite.config.ts 中通过 server.fs.allow 配置允许访问的路径,但在 Taro 项目中直接这样做往往无效。

根本原因

Taro 项目若选用 @tarojs/vite-runner 作为编译器,并不会直接读取项目根目录下的 vite.config.ts,而是通过 Taro 自身的配置体系管理 Vite 行为。

解决方案

需在 Taro 的配置文件 /config/index.ts 中针对 H5 模式进行如下配置:

css 复制代码
h5: {
  devServer: {
    fs: {
      allow: ['..'], // 允许向上访问父级目录
    },
  },
  // 其他原有配置...
}

注意事项

该方法仅适用于在创建脚手架时选择 Vite 作为构建工具的情况。若使用的是 Webpack,可参考类似思路调整 devServer 配置,或查阅 Taro 官方文档进行相应设置。

通过以上调整,可解决因 Vite 安全策略导致的文件访问限制问题,确保开发服务器正常启动。

相关推荐
ruanCat2 小时前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee2 小时前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能
叫我詹躲躲2 小时前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
华仔啊2 小时前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅2 小时前
JavaScript 函数详解
前端·javascript
金金金__3 小时前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
会豪3 小时前
工业仿真(simulation)--前端(二)-资源管理器
前端
@小红花3 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵3 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js