uniapp 文件路径
uniapp 文件路径管理
在 uniapp 中，文件路径的引用方式与普通 Web 开发类似，但需要注意一些平台差异和规范。以下是常见的文件路径处理方式：
静态资源路径
静态资源通常放在 static 目录下，该目录下的文件会被直接复制到打包后的目录中。引用时无需使用 @ 或 / 开头，直接写相对路径即可。
<!-- 图片引用示例 -->
<image src="/static/logo.png"></image>组件路径
组件路径通常使用相对路径或别名 @。@ 代表项目根目录。
<!-- 组件引用示例 -->
<template>
<view>
<my-component></my-component>
</view>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue'
</script>动态路径
动态路径可以通过计算属性或方法生成，适用于需要动态加载资源的场景。
export default {
data() {
return {
imageName: 'banner.png'
}
},
computed: {
imagePath() {
return `/static/images/${this.imageName}`
}
}
}平台差异处理
不同平台对路径的处理可能不同，特别是 H5 和小程序平台。可以使用条件编译处理路径差异。
// #ifdef H5
const basePath = '/static/'
// #endif
// #ifdef MP-WEIXIN
const basePath = '/static/'
// #endif路径别名配置
在 vue.config.js 中可以配置路径别名，简化引用。
const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components')
}
}
}
}注意事项
- 避免使用绝对路径，尽量使用相对路径或别名。
static目录下的文件会被直接复制，修改后需重新编译。- 动态路径需确保路径拼接正确，避免运行时错误。
- 平台差异可能导致路径问题，需充分测试各平台表现。
