Доступ к внешним js-файлам на экземпляре vue

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 

}

, и я хочу получить доступ к consts в отдельном файлена экземпляре vue:

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 с помощьюбазовый импорт скриптов.

Спасибо

Answer 1

Я не использую webpack, я просто работаю с экземпляром vue, получающим доступ к cdn сценария vue с помощью базового импорта сценария.

Если это так, не используйте 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: {

См. демоверсия плунжера здесь .