博客

最近在做uniapp的时候发现在h5上运行正常的代码，在微信小程序上测试的时候报错了

 [渲染层网络层错误] Failed to load local image resource /pages/index/undefined/images/carousel/batmanvssuperman.png 
 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 

查看报错发现是在main.js中给Vue的原型绑定的属性在小程序中没有生效，可以看出路径参数中有一段是undefined

解决方案：

1. 在各自的页面中定义属性

	export default {
		data() {
			return {
				$address: 'http://localhost:3000'
			}
		},
	}

也可以在Vue.prototype上绑定属性然后在各自的组件页面采用变量的形式引入

// main.js
Vue.prototype.$address = 'http://localhost:3000'

// 组件
	export default {
		data() {
            const _this = this
			return {
				$address: _this.$address
			}
		},
	}

2. 使用vuex
   uniapp包含vuex相关内容，直接引用使用即可

//  store------------------------------------------------------
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: { $address: 'http://localhost:3000' },
    mutations: {},
    actions: {}
})
export default store


// main.js-----------------------------------------------------

import Vue from 'vue'
import App from './App'

// 引入vuex
import store from 'store/index.js'
Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'
const app = new Vue({
    ...App,
	store
})
app.$mount()


// 页面--------------------------------------------------------
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState(['$address'])
    }
}