我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

thinkjs的调试模式和生产模式,是不同的,这个不同比以往所有的web类型的代码的区别都更加不同。很多新手发现,在生产模式下,访问 http://127.0.0.1:8360/ 的时候,thinkjs的静态资源文件,比如图片/css/js等,都统统404了,然后就一脸茫然了。

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - thinkjs-404
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-1)

这个就是thinkjs新手的必问问题之一:在生产模式下,为什么静态资源都404找不到了。

标准答案

thinkjs的网站切换到生产模式product.js,一般我们推荐的是使用pm2 start pm2.json来切换的,pm2.json里面的script要配置为product.js,还要注意cwd的写法。当然,你也可以直接node product.js简单暴力的执行。这里有pm2的json格式使用指南文章:https://newsn.net/say/pm2-start-json.html

官方推荐:启用对应的webserver的代理模式。一般我们使用nginx来完成这件事情,在thinkjs的代码根目录下面会有个nginxdemo文件,这个文件启用即可。然后我们访问nginx这个服务器,就可以完成静态资源的访问了。当然这个时候,直接访问nodejs8360的话,仍然会是404的。

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - 002
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-2)

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - 009
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-3)

注意:thinkjs的默认端口号是8360,不是8630。好多人栽在这里了,当然苏南大叔也是,碰壁好多次之后,才发现端口号不对。

刨根问底

这个事情,如果刨根问底的话,还是要归结于thinkjs下面的resource这个middleware。具体位置位于src/config/middleware.js这个文件中,这里控制了静态资源的访问逻辑。

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - 003
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-4)

{
  handle: 'resource',
  enable: isDev,
  options: {
    root: path.join(think.ROOT_PATH, 'www'),
    publicPath: /^\/(static|favicon\.ico|(.*)\.txt)/
  }
}

在这里,这个resourcemiddleware,当且仅当开发模式下才会生效,处理的文件必须位于www目录下面,并且必须符合publicPath这个目录,才可以正式生效。

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - 000
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-5)

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - 001
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-6)

特别提示

最后附上nginx的测试配置及重新加载配置文件的命令,也许读者朋友可能用的上。比如:如果你找不到你服务器上的配置文件位置的话,执行一下nginx -t就会显示出来你想知道的答案哦~

nginx -t
nginx -s reload

苏南大叔:thinkjs 生产模式下,静态资源文件 404 问题的解决方案 - nginx-t
thinkjs 生产模式下,静态资源文件 404 问题的解决方案(图7-7)

额外附赠一篇文章,讲述nginx+pm2+thinkjs的搭建配置过程,希望对读者您有帮助。

云服务器上的可能答案

cmswing作者@特总说:在阿里云服务器上,如果你的代码放置在/root/目录下的话,即使一切都配置正确的话,也会有这种404问题的。这个时候,解决方案就是:换个目录。

据其它云服务器用户反馈,腾讯云服务器上也有一样的问题。所以,请大家,千万不要把代码或者资源放在/root/目录下!!!切记,切记!否则nginxconf文件设置好了www目录,也一样404,没的商量!

结论

当然,如果您实在不想使用nginx去代理node的话,非要直接使用node的话,您也可以修改resource中间件的enable条件。如果你有新的静态资源类型,需要被访问的话,可以修改publicPath参数即可。

nginx上没有太特别的设置,只是将root设置到thinkjswww目录下面,而其他文件,都使用proxy代理到node进行处理罢了。一般这个时候,我们还需要使用pm2来配合启动thinkjs的网站。如果启用了nginx之后,你的还是404的话,请查看修改nginx配置中的root项目,root项目必须指向的是根目录下面的www目录,这个www目录是在middleware源码中的resource中定义的!

这个,就是thinkjs的网站代码,对静态资源文件处理的秘密所在。如果您读懂了本文的内容,那么您就可以处理一系列,您觉得不可思议的相关事项了。世界就是那么奇妙,符合规则即可一切自然。

更多thinkjs的相关内容,请关注苏南大叔的相关文章。https://newsn.net/tag/thinkjs/

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   thinkjs    middleware