Javascript 为什么我会得到；“未定义”；至于；“加载”；当我使用game.load时？（Vue和相位器）

我用Vue+Phaser启动了新项目，但当我尝试加载资产时，this.game.load.image中的“load”和“add”返回“undefined”。 我尝试导入预加载函数，因为它是一个JS文件，但我得到了相同的错误。 我的移相器代码没有返回错误，如果我在没有Vue的情况下测试它，它是Functional

Game.vue：

import Phaser from 'phaser'
export default {
name: 'Game',
data: () => ({
    game: null,
    sprites: {}
}),
mounted () {
    const self = this
    if (this.game == null) {
        this.game = new Phaser.Game({
            type: Phaser.AUTO,
            width: window.innerWidth,
            height: window.innerHeight,
            antialias: true,
            parent: this.$el,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { 
                        y: 300 
                    },
                    debug: false
                }
            },
            scene: {
                preload: function preload() {
                    self.preload(this)
                },
                create: function create() {
                    self.create(this)
                },
                update: function update() {
                    self.update(this)
                },
                render: function render() {
                    self.render(this)
                }
            }
        })
    }
},
methods: {
    preload () {
        this.game.load.setBaseURL('http://labs.phaser.io')

        this.game.load.image('sky', 'src/games/firstgame/assets/sky.png')
        this.game.load.image('ground', 'src/games/firstgame/assets/platform.png')
        this.game.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 })
        this.game.load.spritesheet('monster', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 })
    },
    create (phaser) {
        let self = this
        console.log(self, phaser, this.game)
        this.game.add.image(0, 0, 'sky').setOrigin(0,0).setScale(4);
    },
    listener (e) {
        console.log('listener', e)
    },
    update () {

    },
}
}

---

很抱歉我的英语错误

我猜您正在使用Webpack/Vue CLI

如果是这种情况，请将这些资产作为模块导入，并在加载程序调用中引用导入

import sky from 'src/games/firstgame/assets/sky.png'

// in your preload method:
this.game.load.image('sky', sky)

这是必要的，因为Webpack需要将源文件夹中的图像路径替换为生成的输出目录中的图像路径

另外，请查看我的Vue/Phaser网页包模板，它为您提供了一切良好的设置，让您可以开始工作

---

如果我能早点找到它就好了……vue.config.js是我在任何地方都找不到的。这是我发现的唯一能让图像工作的答案。非常感谢。