PHP引入的JS文件无法按相对路径找到Assets目录位图该如何解决

问题根因 #

你当前报错的核心原因是：PHP的include是服务端读取app.js的内容，直接嵌入到index.php输出的HTML页面中，浏览器执行这段JS代码时，相对路径的基准是index.php的访问URL路径，而非app.js的原始存放路径。
如果你的Web服务根目录设置为了PHP_folder，还会额外触发另一个问题：Assets_folder在Web服务根目录之外，浏览器发起的HTTP请求无法访问到Web根目录外的资源，PHP的服务端读取不受此限制，但静态资源请求不允许跨Web根目录访问。

你的目录结构 #

• Root_folder
  • PHP_folder
    • index.php
  • Javascript_folder
    • app.js
  • Assets_folder
    • my_texture.jpg

解决方案 #

方案1（最稳妥，无路径适配问题） #

将Web服务的根目录调整为Root_folder，保证三个文件夹都在Web可访问范围内，之后直接使用站点根路径写资源地址：

var texture = new THREE.TextureLoader().load("/Assets_folder/my_texture.jpg");

路径开头的/代表从站点根目录开始查找，不管JS代码嵌入到哪个层级的页面中，都可以正确定位资源。

方案2（不调整Web根目录） #

如果无法修改Web服务根目录配置，可以有两个选择：

1. 将Assets_folder整体移动到PHP_folder内部，之后JS路径写为：

var texture = new THREE.TextureLoader().load("./Assets_folder/my_texture.jpg");

2. 在Web服务配置中给Assets_folder设置访问别名，以Nginx为例，添加如下配置：

location /Assets/ {
    root /你的服务器实际路径/Root_folder/Assets_folder;
}

之后JS路径写为：

var texture = new THREE.TextureLoader().load("/Assets/my_texture.jpg");

内容的提问来源于stack exchange，提问作者tribal