使用TypeORM搭建的服务无法访问assets目录下图片该如何解决

问题根因 #

你遇到的问题和TypeORM本身无关，是两个常见的TypeScript项目配置问题：

1. tsc 仅负责编译.ts后缀的代码文件，不会自动复制静态资源到编译输出的build目录
2. express.static('assets/') 使用相对路径寻址，路径会跟随Node进程的启动目录变化，大概率匹配不到实际的assets目录位置

解决方案 #

方案1：静态资源跟随编译产物存放（推荐生产环境使用） #

步骤1：配置自动同步assets到build目录

tsc本身不支持复制非TS文件，你可以用跨平台工具cpx实现自动同步：

1. 安装依赖：npm install cpx --save-dev
2. 修改package.json的scripts字段：

{
  "scripts": {
    "build": "tsc && cpx \"assets/**/*\" build/assets/",
    "dev": "tsc -w & cpx \"assets/**/*\" build/assets/ --watch & nodemon build/index.js"
  }
}

如果是纯Mac/Linux环境也可以直接用cp -r assets build/代替cpx命令。

步骤2：修改静态资源路径为绝对路径

修改express的静态资源配置，用绝对路径寻址避免运行目录影响：

import express, { Express } from 'express';
import path from 'path';
import { createConnection } from 'typeorm';

const app: Express = express();
createConnection();
app.use(express.json());
// __dirname是当前运行的js文件所在的build目录，直接匹配同目录下的assets
app.use(express.static(path.join(__dirname, 'assets'))); 
app.listen(9000, ()=> console.log(`Server is running`));

方案2：直接引用根目录assets（推荐开发环境使用） #

如果你不想把静态资源复制到build目录，可以直接寻址项目根目录的assets文件夹：

import express, { Express } from 'express';
import path from 'path';
import { createConnection } from 'typeorm';

const app: Express = express();
createConnection();
app.use(express.json());
// 从build目录往上跳一级就是项目根目录，直接找根目录下的assets
app.use(express.static(path.join(__dirname, '../assets'))); 
app.listen(9000, ()=> console.log(`Server is running`));

该方案无需同步静态资源，开发阶段修改assets内容可以立即生效，生产部署时记得把assets目录和build目录一起打包发布即可。

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