在使用 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 安全策略导致的文件访问限制问题,确保开发服务器正常启动。