Taro——H5项目如何修改静态文件入口

前言

这里我们来说下如何修改Taro静态文件的入口，一般情况下是不需要修改的，但是如果你是在当前项目下部署的二级站点，那你就需要调整了。

内容

这里我们说两种情况，一种是在静态资源引入的时候加入前缀，另一种是真正的将静态资源输出到指定的目录下。

静态资源前缀

这里的静态文件入口指的是仅index.html中静态引入资源文件中，加入相应的前缀，其他的不做任何变动，上配置：

代码语言：js复制

{
  h5: {
    //....省略的配置
    router: {
      mode: 'browser',
      basename: '/mobile',
    },
    publicPath: '/mobile',
    //....省略的配置
  }
}

是不是很简单，只需要调整下publicPath，但是如果你不清楚Taro的配置文件，那估计你要搞到头疼咯。

那么 nginx 我们应该如何代理呢？接下来，让我们继续看配置：

代码语言：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。

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

腾讯技术创作特训营S9 tarotaro h5

1 人点赞