关于静态资源引用

参考uni-app的静态资源引用说明 (opens new window)

静态资源一般有两种放置的方式：

1. cdn推荐使用：节省应用服务器资源，加快页面渲染速度，尤其是在微信小程序中，减少打包体积
2. static目录：本地静态资源

页面使用静态资源的方法，一般会采用全局配置方式，方便切换，比如开发时使用static，发布生产环境后，改为cdn，推荐做法如下：

定义全局变量

1. 在src下新建consts.js常量文件

// const STATIC_BASE_URL = 'https://cdn-static' // cdn静态路径
const STATIC_BASE_URL = '/static' // 本地静态路径

const DEFAULT_CONSTS = {
  STATIC_BASE_URL, // 静态资源baseURL
  STATIC_IMG_URL: STATIC_BASE_URL + '/img/'
}
export default DEFAULT_CONSTS

2. 在main.js挂载config.js到Vue.prototype上，方便全局调用

提示

这里为什么不直接把常量挂载到Vue.prototype上，而是挂载一个方法呢，因为跨平台编译原因，在小程序中template是没办法直接使用常量的，只能通过方法调用，所以把方法挂载到Vue.prototype上，在全局调用。

import DEFAULT_CONSTS from './consts'
Vue.prototype.$getConsts = (field) => {
  if (field) return CONSTS[field]
  return DEFAULT_CONSTS
}

3. uni.scss 声明全局变量

// $STATIC_BASE_URL: 'https://cdn-static'; // cdn静态路径
$STATIC_BASE_URL: '~@/static'; // 本地静态路径
$STATIC_IMG_URL: $STATIC_BASE_URL + '/img/'; // 静态图路径

template中使用方式

<pi-img width="84" :src="$getConsts('STATIC_IMG_URL') + operate.icon" />

scss中使用方式

.card-bg {
  background: #f4f4f4 url($STATIC_IMG_URL+'search.png') no-repeat left 12rpx center/ 28rpx 28rpx;
}