Taro——H5项目如何修改静态文件入口
前言
这里我们来说下如何修改Taro静态文件的入口,一般情况下是不需要修改的,但是如果你是在当前项目下部署的二级站点,那你就需要调整了。
内容
这里我们说两种情况,一种是在静态资源引入的时候加入前缀,另一种是真正的将静态资源输出到指定的目录下。
静态资源前缀
这里的静态文件入口指的是仅index.html
中静态引入资源文件中,加入相应的前缀,其他的不做任何变动,上配置:
{ h5: { //....省略的配置 router: { mode: 'browser', basename: '/mobile', }, publicPath: '/mobile', //....省略的配置 } }
是不是很简单,只需要调整下publicPath
,但是如果你不清楚Taro
的配置文件,那估计你要搞到头疼咯。
那么 nginx
我们应该如何代理呢?接下来,让我们继续看配置:
# 这里的mobile其实就是我们前面在`Taro`配置的`basename` location ^~ /mobile/ { alias /var/www/html/hhk-mobile/web/; index index.html; try_files $uri $uri/ /mobile/index.html; access_log /alidata/www/wwwlogs/mobile.log; }
站点目录: /var/www/html/hhk-mobile/
制品目录: web/
(在站点下打包后,使用 mv dist web
命令即可)
重新载入 nginx
的配置文件后,访问 https://<域名>/mobile
即可。
指定静态资源目录
指定静态资源的输出目录,配置也很简单,只需要我们在h5
下进行以下配置,那么打包后,你的制品就会输出到自定义的mobile
下,当前你的index.html
引入的资源也会是/mobile/js/xxx.js
。
{ h5: { output: { filename: 'mobile/js/[name].[contenthash:8].js', chunkFilename: 'mobile/js/[name].[contenthash:8].js', }, miniCssExtractPluginOption: { filename: 'mobile/css/[name].[contenthash:8].css', chunkFilename: 'mobile/css/.[contenthash:8].css', }, } }
或许这时候你会说,那么我直接指定输出目录不就好了嘛,但其实这个不符合我们的诉求,因为这里的制品会多嵌套一层
mobile
的目录,那么我们访问静态资源的地址就是https://<域名>/mobile/mobile/js/xxxjs
,只有这样我们才能拿到静态资源,但是我们实际的访问地址是https://<域名>/mobile/js/xxxjs
,这就会导致我们访问静态资源出现404。
总结
以上就是所有的内容了,这里有个小建议,大家遇到问题的时候,大家可以多看下官方的文档、github issue
,如果真的找不到的时候,可以先放空下再来思考。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 一个费力不讨好的项目,让我损失了近一半的绩效!
2018-09-27 sakila数据库及其他数据库实例文件