electron+vue加载本地wav音频资源失败

解决electron+vue加载本地音频失败

1.下载electron-vue程序

vue init  simulatedgreg/electron my-project
cd my-project
npm install
npm run dev

2.建立一个Music音频加载组件

<template>
  <div v-show="false">
    <audio :src="url" ref="audio"></audio>
  </div>
</template>

<script>
const path = require("path");
export default {
  name: "Music",
  props: ["file_name"],
  data() {
    return {
      url: "",
    };
  },
  methods: {
    play() {
      this.$refs.audio.play();
    },
    pause() {
      this.$refs.audio.pause();
    },
  },
  created() {
    this.url = path.join(__static, "/music/" + this.file_name);
  },
};
</script>

<style scoped></style>

3.在首页引入Musinc组件并使用

<template>
  <div>
    <button @click="stopPlay">停止播放</button>
    <Music file_name="picture.wav" ref="picture"></Music>
  </div>
</template>

<script>
import Music from "@/components/Music";
export default {
  components: {
    Music,
  },
  mounted() {
    this.$refs.picture.play();
  },
  methods: {
    stopPlay() {
      this.$refs.picture.pause();
    },
  },
};
</script>

<style lang="scss" scoped></style>

4.程序起来后，控制台报Not allowed to load local resource:资源路径

5.经过各种path路径修改，发现在主进程main/index.js添加

效果使用正常