javascript - vue实例访问外部js文件

Question

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

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 实例上单独文件中的常量:

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

例如内部方法，我该怎么做？

我已经尝试在加载之前和之后加载顶部的文件，但我总是得到这个错误:意外的标识符，有什么办法可以解决这个问题？

我没有使用 webpack，我只是在使用 vue 实例访问带有基本脚本导入的 vue 脚本 cdn。

谢谢

Answer 1

I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.

如果是这种情况，请不要使用 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 .