微信小程序——配置路径别名和省略后缀

在微信小程序中配置 @ 路径别名和省略 .js 后缀，可以提高开发效率和代码可读性。

一、配置 @ 路径别名（替代相对路径）

1. 项目根目录创建 jsconfig.json 文件（针对 JavaScript 项目）

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 假设你的源码在 src 目录下
    }
  },
  "exclude": ["node_modules", "miniprogram_npm"]
}

2. 调整微信开发者工具设置

• 打开微信开发者工具
• 点击顶部菜单 工具 → 构建 npm
• 勾选 使用 npm 模块
• 重启开发者工具

3. 使用示例

// 之前：相对路径
import utils from '../../utils/util';

// 之后：使用 @ 别名
import utils from '@/utils/util';

二、省略 .js 后缀配置

1. 在 jsconfig.json 中添加 moduleFileExtensions

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "moduleFileExtensions": ["js", "json", "wxml", "wxss", "ts"] // 允许省略的后缀
  },
  "exclude": ["node_modules", "miniprogram_npm"]
}

2. 使用示例

// 之前：必须写后缀
import utils from '@/utils/util.js';

// 之后：可省略 .js 后缀
import utils from '@/utils/util';

三、常见问题及解决方案

1. 编辑器提示找不到模块

• 原因 ：微信开发者工具的代码提示可能未正确加载 jsconfig.json
• 解决方案 ：
  • 重启微信开发者工具
  • 检查 jsconfig.json 路径是否正确（必须在项目根目录）
  • 确保 baseUrl 和 paths 配置与项目结构一致

2. 构建后路径错误

• 原因 ：微信小程序构建工具可能不识别 @ 别名
• 解决方案 ：
  • 使用官方推荐的 miniprogram-ci 构建工具
  • 或在构建脚本中添加路径转换插件（如 babel-plugin-module-resolver）

3. TypeScript 项目配置

如果是 TypeScript 项目，需创建 tsconfig.json 并配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  }
}

四、配置验证方法

1. 在代码中使用 @ 路径导入模块
2. 检查编辑器是否有正确的代码提示（如自动补全、跳转到定义）
3. 编译项目，确保没有路径相关的错误