淦，踩坑就完事了，在VUE里面你直接给它绑一个路径的话是跟之前原生JS那套不一样的，如果是原生JS，这样给这个src值以后就能显示出来了，但是在VUE里面，运行npm run serve之后，他会打包再运行，打包完了以后，之前写的在项目中看的正确的路径，在打包完事后就变味了，所以需要这么整
这是原来的踩坑之前的代码
<template>
<div>
<video ref="video" loop muted autoplay></video>
</div>
</template>
<script>
export default{
data(){
return{
img:"../../../assets/video/video.mp4"
}
},
created() {
},
mounted() {
this.getImage();
},
methods:{
getImage(){
// let img = document.getElementById()
this.$refs.video.src = this.img
}
}
}
</script>
<style>
</style>
这是修改完以后的
<template>
<div>
<video ref="video" loop muted autoplay></video>
</div>
</template>
<script>
export default{
data(){
return{
img:require("@/assets/video/video.mp4")
}
},
created() {
},
mounted() {
this.getImage();
},
methods:{
getImage(){
// let img = document.getElementById()
this.$refs.video.src = this.img
}
}
}
</script>
<style>
</style>
按照这个写完以后，就可以让他自动转换为打包后的那一套路径，自然而然就可以显示了
require函数
下面这一段引用自阮一峰大神的文章
当 Node 遇到 require(X) 时，按下面的顺序处理。
（1）如果 X 是内置模块（比如 require(‘http’）)
a. 返回该模块。
b. 不再继续执行。
（2）如果 X 以 “./” 或者 “/” 或者 “…/” 开头
a. 根据 X 所在的父模块，确定 X 的绝对路径。
b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
X
X.js
X.json
X.node
c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
X/package.json（main字段）
X/index.js
X/index.json
X/index.node
（3）如果 X 不带路径
a. 根据 X 所在的父模块，确定 X 可能的安装目录。
b. 依次在每个目录中，将 X 当成文件名或目录名加载。
（4） 抛出 “not found”
@符作用：
参考博客：
https://blog.csdn.net/niceyoo/article/details/89347167
相当于src，按上面代码举例，实际上给require的路径为src/assets/video/video.mp4
