如何将Solid.js项目部署到非根目录？异常原因及解决方法

1. 问题产生的原因 #

• Solid.js新项目默认基于Vite构建，Vite的base配置项默认值为/（根路径），构建时会将index.html里的资源引用生成为绝对根路径（如/assets/xxx.js）。
• 当部署到服务器子目录时，浏览器会从服务器根目录（而非子目录）请求这些资源，实际资源却在子目录的assets文件夹下，因此触发404错误。
• JS文件内的相对路径不受影响，是因为运行时会以当前JS文件所在的assets目录为基准解析路径，和index.html的资源引用逻辑不同。

2. 解决方法（需要调整编译配置） #

直接修改Vite配置文件（vite.config.js或vite.config.ts），设置base参数即可，两种场景对应不同配置：

场景一：固定部署到某个子目录 #

比如要部署到服务器的/my-solid-project/子目录，修改配置如下：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  base: '/my-solid-project/', // 子目录路径，前后斜杠都不能少
});

修改后重新执行npm run build，生成的dist文件中，index.html的资源路径会自动变为/my-solid-project/assets/xxx，部署到对应子目录即可正常访问。

场景二：不确定部署路径/需要适配任意子目录 #

将base设为相对路径./，这样所有资源都会以index.html所在目录为基准解析：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  base: './',
});

注意：如果项目使用了history模式路由，需要额外配置服务器的fallback规则（比如Nginx配置try_files $uri $uri/ /index.html;），否则刷新页面会出现404；如果是哈希模式路由则无此问题。

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