我正在开发一个简单的应用程序,在其中设置要在开发中使用的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/