uniapp中的静态资源文件，如图片等文件，h5端设置本地与生产测试环境的区别，本地不加前缀，生产测试添加前缀，h5端的已进行测试可行，非h5的未进行测试
在 UniApp 中，如果需在生产环境为静态文件添加前缀 /Check-app/，本地环境不加，且通过 manifest.json 配合配置实现（h5和非h5端分开实现）
一、主要思路
- **H5 端：**通过 manifest.json 中 H5 配置的 publicPath 区分环境（生产环境加前缀，本地不加）。
- **非 H5 端（App / 小程序等）：**通过代码逻辑判断环境，动态拼接前缀（不依赖 manifest.json，因非 H5 端不支持 publicPath）。
二、manifest.json 完整配置（ H5 端）
{"name": "你的项目名称","appid": "__UNI__XXXXXX","description": "","versionName": "1.0.0","versionCode": 100,"transformPx": true,"uniStatistics": {"enable": false},"app-plus": {"usingComponents": true,"nvueStyleCompiler": "uni-app","compilerVersion": 3},"mp-weixin": {"appid": "","setting": {"urlCheck": false},"usingComponents": true},"h5": {// 生产环境配置（HBuilderX 发行时生效）"publicPath": "/selfCheck-app/""title": "你的 H5 页面标题","router": {"mode": "hash"},// H5 端核心配置：publicPath 区分环境"devServer": {// 本地开发环境：publicPath 为根路径（无前缀）"publicPath": "/"},},"quickapp": {"package": "com.example.quickapp","name": "uni-app"}
}
配置说明：
- **h5.devServer.publicPath：**本地开发时（HBuilderX 运行到浏览器）生效，值为 /（无前缀）。
- **h5.publicPath：**生产环境（HBuilderX 发行 H5）生效，值为 /selfCheck-app/（添加前缀）。
- 此配置仅对 H5 端有效，非 H5 端需单独处理。
三、非 H5 端（App / 小程序）处理逻辑，未测试
非 H5 端不支持 publicPath，需通过代码判断环境并动态拼接前缀，步骤如下：
1. 创建环境判断工具（utils/env.js）
/*** 判断是否为生产环境* 生产环境：HBuilderX 发行（打包）时* 开发环境：HBuilderX 运行（调试）时*/
export function isProduction() {// UniApp 打包时会注入 UNI_PLATFORM，开发时可能为 undefined 或包含 devconst platform = process.env.UNI_PLATFORM || '';// 生产环境的平台值不包含 dev（如 h5、mp-weixin、app-plus）return !platform.includes('dev') && platform !== '';
}
2. 创建静态资源路径工具（utils/staticPath.js）
import { isProduction } from './env';/*** 获取静态资源完整路径* @param {string} relativePath 资源相对路径（如 'img/logo.png'）* @returns {string} 完整路径*/
export function getStaticPath(relativePath) {// H5 端已通过 manifest.json 的 publicPath 处理，直接返回 /static/xxxif (process.env.UNI_PLATFORM === 'h5') {return `/static/${relativePath}`;}// 非 H5 端：生产环境加前缀，开发环境不加const prefix = isProduction() ? '/selfCheck-app/static/' : '/static/';return `${prefix}${relativePath}`;
}
3. 在页面中使用静态资源
<template><!-- 图片 --><image :src="getStaticPath('img/logo.png')" mode="widthFix"></image><!-- 背景图（需用 :style 绑定） --><view :style="{ backgroundImage: `url(${getStaticPath('img/bg.jpg')})`,backgroundSize: 'cover'}"></view>
</template><script>
import { getStaticPath } from '@/utils/staticPath';export default {methods: {getStaticPath}
};
</script>
四、验证方式
- 本地开发环境测试：
- H5 端：通过 HBuilderX 运行到浏览器，查看资源路径（如图片 src）应为 http://localhost:8080/static/img/logo.png（无前缀）。
- 小程序 / App 端：运行到模拟器，查看资源路径应为 /static/img/logo.png（无前缀）。
- 生产环境测试：
- H5 端：通过 HBuilderX 发行（发行 -> H5 网页），打包后查看资源路径应为 http://你的域名/selfCheck-app/static/img/logo.png（带前缀）。
- 小程序 / App 端：发行打包后，通过工具查看源码，资源路径应为 /selfCheck-app/static/img/logo.png（带前缀）。
总结
- H5 端：通过 manifest.json 中 h5.publicPath 和 h5.devServer.publicPath 区分环境，自动添加前缀。
- 非 H5 端：通过代码判断环境，动态拼接前缀，确保生产环境路径包含 /selfCheck-app/。
上述方案无需手动修改 process.env，完全适配 UniApp 官方构建流程，兼容性更强。