uniapp格式应该怎么写

在 UniApp 中正确引入 `constant` 目录下的文件,需要根据项目结构和运行平台进行适配。以下是标准化的解决方案:

---

### **一、推荐目录结构**
```markdown
src/
├── static/                # 静态资源(会原样拷贝到dist)
│   └── constant/          # 建议将需要拷贝的配置文件放这里
│       ├── sdk/
│       │   └── index.js
│       ├── config.js
│       └── cgi.js
├── common/                # 公共代码(非静态资源)
├── pages/
└── App.vue
```

---

### **二、标准引入方式**

#### **1. 通用方案(推荐)**
在 `vue.config.js` 中配置别名:
```javascript
// vue.config.js
const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@constant': path.resolve(__dirname, 'src/static/constant') // 统一别名
      }
    }
  }
}
```
代码中引用:
```javascript
import sdk from '@constant/sdk/index.js'
import { urlPrefix } from '@constant/config'
import { questionAPI } from '@constant/cgi'
```

#### **2. 条件编译方案(多平台兼容)**
```javascript
// #ifdef MP-WEIXIN
// 微信小程序使用static路径
import sdk from '../../static/constant/sdk/index.js'
// #endif

// #ifdef H5 || APP
// 其他平台使用原始路径
import sdk from '@/constant/sdk/index.js'
// #endif
```

#### **3. 静态资源方案**
如果文件必须放在 `static` 目录:
```javascript
// 所有平台统一路径(注意没有@符号)
import sdk from '../../static/constant/sdk/index.js'
```

---

### **三、关键配置检查**

1. **jsconfig.json 配置**
```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@constant/*": ["src/static/constant/*"]
    }
  }
}
```

2. **确保文件被正确拷贝**
检查编译后的目录:
```bash
# 编译后确认文件存在
ls dist/dev/mp-weixin/static/constant/sdk/index.js
```

---

### **四、调试技巧**

1. 打印实际解析路径:
```javascript
console.log(require.resolve('@constant/sdk/index.js'))
```

2. 清理缓存:
- 删除 `unpackage` 和 `node_modules/.cache`
- 微信开发者工具 → 清除缓存

---

### **五、常见问题处理**

| 问题现象 | 解决方案 |
|---------|----------|
| `Cannot find module` | 检查文件是否在 `dist` 目录存在 |
| 路径大小写问题 | 统一使用小写路径 |
| 别名不生效 | 检查 `vue.config.js` 和 `jsconfig.json` |

---

### **六、最佳实践建议**
1. **静态配置文件** 放在 `static/constant/`
2. **业务公共代码** 放在 `common/`
3. 使用 **Webpack别名** 代替相对路径
4. 微信小程序必须使用 **真实存在的物理路径**

按照以上规范配置后,可确保多平台兼容无报错。

你可能感兴趣的:(搜索引擎)