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,如果真的找不到的时候,可以先放空下再来思考。

目录
相关文章
|
定位技术 API
基于Leaflet.draw的自定义绘制实战
本文介绍了如何基于leaflet.draw进行自定义绘制,同时获取对象的bbox和geojson信息。
1042 0
基于Leaflet.draw的自定义绘制实战
|
缓存 前端开发 IDE
通义灵码企业代码补全增强使用实践
通义灵码提供了企业代码补全增强的能⼒,在开发者使⽤通义灵码 IDE 插件的⾏间代码补全时,可以结合企业上传的代码库作为上下⽂进⾏⾏间代码补全,使代码补全更加贴合企业代码规范、业务特点。本⽂将分享如何构建⾼质量的企业代码库,以及开发者在前端和后端开发场景的使⽤实践。
|
移动开发 JSON 小程序
明文scheme拉起此小程序
明文scheme拉起此小程序
780 4
|
网络安全 开发工具 git
git clone之报错git@gitee.com:Permission denied (publickey).fatal: Could not read from remote repository
git clone之报错git@gitee.com:Permission denied (publickey).fatal: Could not read from remote repository
1210 0
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
594 0
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
小程序 开发者
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
4. 解决uni-app开发过程中view、image等标签出现诸如“出现错误:类型“{ class: string; }”的参数不能赋给类型“.......”
4. 解决uni-app开发过程中view、image等标签出现诸如“出现错误:类型“{ class: string; }”的参数不能赋给类型“.......”
987 0
|
Dart 前端开发 JavaScript
dart-sass与node-sass的区别以及使用dart-sass可能会出现的问题
dart-sass与node-sass的区别以及使用dart-sass可能会出现的问题
1867 0
dart-sass与node-sass的区别以及使用dart-sass可能会出现的问题
|
缓存 关系型数据库 MySQL
为什么MySQL分页查询偏移量越大查询越慢
【5月更文挑战第1天】为什么MySQL分页查询偏移量越大查询越慢
554 4

热门文章

最新文章