uniapp Vue.prototype绑定属性无法在微信小程序中直接使用 报[渲染层网络层错误]
最近在做uniapp的时候发现在h5上运行正常的代码,在微信小程序上测试的时候报错了[渲染层网络层错误] Failed to load local image resource /pages/index/undefined/images/carousel/batmanvssuperman.pngthe server responded with a status of 500 (HTTP/1.1
·
最近在做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
解决方案:
- 在各自的页面中定义属性
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
}
},
}
- 使用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'])
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)