我正在开发一个简单的应用程序,在其中设置要在开发中使用的const列表。所以我创建了一个像这样的文件:

consts.js

export default {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10


}

我想在Vue实例上的单独文件中访问const:

window.onload = function () {
    new Vue({
        el: '#appMonster',
        data: {
            startClicked: false,
            monsterLife: {
                width: '100%',
                life: 100
            },
            youLife: {
                width: '100%',
                life: 100
            }
        },
        methods: {
...


例如内部方法,我该怎么办?

我已经尝试在onload之前和之后导入文件的顶部,但是我总是会收到此错误:意外的标识符,有什么办法解决这个问题?

我没有使用webpack,我只是使用vue实例通过基本脚本导入来访问vue脚本CDN。

谢谢

最佳答案

我没有使用webpack,我只是使用vue实例通过基本脚本导入来访问vue脚本CDN。


如果是这种情况,请不要使用import / export。只是:

consts.js:

const constants = {
    MAX_HEALTH: 100,
    MAX_HEALTH_PERCENTAGE: '100%',
    ATTACK_FLAG: 1,
    HEALTH_FLAG: -1,
    PERCENTAGE: '%',
    ATTACK_MIN_RANGE: 1,
    ATTACK_YOU_MAX_RANGE: 10,
    ATTACK_MONSTER_MAX_RANGE: 7,
    SPECIAL_ATTACK_MIN_RANGE: 5,
    SPECIAL_ATTACK_YOU_MAX_RANGE:12,
    HEAL_MIN_RANGE: 1,
    HEAL_MAX_RANGE: 10
}


如果您之前导入了<script src="consts.js"></script>,则其他文件只需执行以下操作:

// somewhere before: <script src="consts.js"></script>
<script>
window.onload = function () {
    new Vue({
        el: '#appMonster',
        data: {
            startClicked: false,
            monsterLife: {
                width: '100%',
                life: constants.MAX_HEALTH          // <==== use constants.PROPNAME
            },
            youLife: {
                width: '100%',
                life: 100
            }
        },
        methods: {


请参见plunker demo here

关于javascript - 在vue实例上访问外部js文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50002938/

10-11 23:02
查看更多