当前位置：首页 > article >正文

windows10 配置使用json server作为图片服务器

article 2025/1/31 10:15:31

步骤1：在vs code中安装json server,

npm i -g json-server

注意：需要安装对应版本的json server，不然可能会报错，比如：

npm i -g json-server 0.16.3

步骤2：出现如下报错：

'json-server' 不是内部或外部命令，也不是可运行的程序或批处理文件。

这种“XXX不是内部或外部命令，也不是可运行的程序或批处理文件。”,基本上就是没有配置环境变量。使用如下命令查看node js的prefix目录

npm config ls

找到prefix选项，并将该路径添加到笔记本环境变量的Path变量中即可：

添加路径到Path变量如下：

步骤3：使用json-server

在vscode中创建文件夹，比如db文件夹以及子文件夹uploads，往里面添加图片数据和json文件数据，如下所示：

{
  "list": [
    {
      "id": 1,
      "name": "衣服1",
      "img": "http://localhost:3000/1.png",
      "price": 18,
      "count": 6
    },
    {
      "id": 2,
      "name": "衣服2",
      "img": "http://localhost:3000/2.png",
      "price": 29,
      "count": 4
    },
    {
      "id": 3,
      "name": "衣服3",
      "img": "http://localhost:3000/3.png",
      "price": 98,
      "count": 1
    },
    {
      "id": 4,
      "name": "衣服3",
      "img": "http://localhost:3000/4.png",
      "price": 9,
      "count": 6
    }
  ]
}

json-server -s ./uploads cart.json

简单解释如下：-s表示指定图片路径为当前子文件夹的uploads文件夹，这个网上解释比较少