Vue项目接入jQuery-SlotMachine找不到DOM及Nginx部署问题求助

问题原因 #

你当前的报错是代码执行时机不对导致的：你把SlotMachine实例化的代码写在了Vue组件导出对象的外部，这部分代码会在js文件加载时立刻执行，此时Vue组件还没完成挂载，对应的#machine DOM元素根本没有渲染到页面上，querySelector自然只能拿到null。

解决方案 #

把实例化逻辑移到Vue组件的mounted生命周期钩子中即可，这个钩子会在组件DOM完全渲染完成后触发，能保证正确获取到目标元素。另外更推荐用Vue内置的$refs来获取DOM元素，比全局querySelector更稳定，不会受到页面其他同id元素的影响。

修改后代码示例 #

template部分

<template>
  <div id="app">
    <!-- 给目标元素加ref属性，方便后续获取 -->
    <div ref="machine" id="machine">
      <div>Madrid</div>
      <div>London</div>
      <div>New York</div>
    </div>
    <!-- 后续要加停止按钮直接绑定事件即可 -->
    <!-- <button @click="stopMachine">停止</button> -->
  </div>
</template>

script部分

<script>
import SlotMachine from './components/slotmachine.js'
export default {
  name: 'App',
  data() {
    return {
      machine: null // 把老虎机实例挂到data上，方便后续调用停止等方法
    }
  },
  mounted() {
    // 用$refs获取DOM，保证拿到的是当前组件内渲染完成的元素
    const el = this.$refs.machine
    this.machine = new SlotMachine(el, {active: 1,delay: 450,auto: 1500})
  },
  methods: {
    // 后续停止逻辑直接在这里实现即可
    stopMachine() {
      const stopIndex = this.machine.stop()
      // 拿到停止位置后直接调用你的后端接口上传即可
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者ch157fl