如何在Ionic Lab中提供Mock文件访问及配置Ionic Config JSON

嘿，我刚从Angular转用Ionic的时候也碰到过一模一样的问题，当时纠结了好一会儿，现在把正确的配置方法分享给你～

一、配置静态资源文件夹（让mocks目录可访问） #

Ionic基于Angular的项目，现在用angular.json来管理资源配置（替代了老版本的.angular-cli.json），你只需要把mocks文件夹添加到资源列表里就行：

1. 打开项目根目录下的angular.json文件

2. 找到projects -> 你的项目名称 -> architect -> build -> options -> assets数组

3. 在数组里添加以下配置项：

   {"glob": "**/*", "input": "./mocks", "output": "./mocks"}
   

   • glob: 匹配文件夹里的所有文件和子目录
   • input: 指定要拷贝的源文件夹路径
   • output: 指定编译后资源输出的路径（和源路径保持一致，这样访问路径就和你预期的一样）

4. 保存文件后，重启Ionic服务（必须重启，不然配置不会生效）：

   ionic serve --lab
   

现在你再访问http://localhost:8100/mocks/my-mock-data.json，应该就能正常拿到你的Mock JSON文件了～

二、关于ionic.config.json的设置 #

首先要明确：ionic.config.json是用来配置Ionic CLI的全局或项目级行为的（比如默认启动端口、默认浏览器、集成工具等），和静态资源的访问配置没有关系。如果需要修改它的话，有两种方式：

方式1：通过CLI命令修改 #

比如设置默认启动端口为8101：

ionic config set ports.app 8101 --project

（--project表示只针对当前项目生效，不加的话是全局配置）

方式2：直接编辑ionic.config.json文件 #

打开项目根目录的ionic.config.json，可以手动添加或修改配置项，比如：

{
  "name": "your-project-name",
  "integrations": {
    "capacitor": {}
  },
  "type": "angular",
  "config": {
    "ports": {
      "app": 8101
    },
    "browser": "chrome"
  }
}

这里的config字段里可以配置CLI的各种行为，比如默认浏览器、端口等，但记住这和静态资源访问无关哦～

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