vue项目中使用服务器端js中的变量的相关问题

首相，绝对地址中的js是这样的

此处我想引用baseUrl中的变量

(function(global, config) {
	var baseUrl = {
		shopId:1469,
		imgUrl:'https://namek-admin.oss-cn-beijing.aliyuncs.com/changeu/fe4ad7af6de5429b9c5052283fd8ecf0.jpg'
	}
    global.baseUrl = baseUrl;
}) (this, this.config || {});

然后在vue中需要新建一个组件挂载这个js

组件内容是这样的，就相当于组件间传值

<template>
  <remote-js :src="this.jsUrl" @load-js-finish="this.jsLoadCallBack"></remote-js>
</template>

<script>
  export default {
    components: {
      'remote-js': {
        render (createElement) {
          var self = this
          return createElement('script', {
            attrs: { type: 'text/javascript', src: this.src },
            on: {
              load: function () {
                console.log('load js')
                self.$emit('load-js-finish')
              }
            }
          })
        },
        props: {
          src: { type: String, required: true }
        }
      }
    },
    props: {
      jsUrl: { type: String, required: true },// 需要加载的外部url
      jsLoadCallBack: Function// 外部js加载完成回调
    }
  }
</script>

然后在哪个组建中需要用到这些变量，就需要在哪个组件中引用，，比如

<template>
    <div>
      <img :src="img_url" alt="">
      <remote-js :js-url="'http://h5t.nam.xyz/data.js'" :js-load-call-back="loadRongJs"></remote-js>
    </div>
</template>

<script>
  import RemoteJs from './remoteJs'// 导入组件
    export default {
        name: "index",
      data() {
        return {
          img_url:''
        }
      },
      components: {
        RemoteJs
      },
      methods:{
        loadRongJs() {
          console.log(baseUrl)
          this.img_url = baseUrl.imgUrl;
        }
      }
    }
</script>

<style scoped>

</style>

然后你改动绝对地址的js中的内容就可以看到变化了，

以上是我在百度中找的一些例子，根据自己需要的整理出来的，原理也不是很明白，希望能够帮到你们

 

祝工作顺利，身体健康