如何在Laravel+Vue项目的Vue组件中正确引入原生JavaScript文件

核心逻辑 #

你用到的原生JS大多依赖DOM容器加载完成后才能执行，所以要调整引入时机和调用方式，按照你的JS是否做了模块化导出分两种处理方式：

情况1：JS无模块化导出（默认挂载变量/方法到window对象） #

这类脚本不需要接收导出值，直接导入即可，但要注意执行时机：如果脚本加载后会自动初始化地图，需要把导入逻辑放在mounted生命周期中，确保#map容器已经渲染完成。
调整后代码示例：

<template>
    <div id="map"></div>
</template>

<script>
export default {
    async mounted(){
        // 等DOM渲染完成后再加载执行原生JS
        await import('../plugins/data')
        await import('../plugins/country')
    }
}
</script>

情况2：JS有模块化导出（写了export相关逻辑） #

需要给导入的模块起别名，在mounted中手动调用导出的初始化方法，更推荐用ref替代id避免多组件冲突：

<template>
    <div ref="mapRef"></div>
</template>

<script>
// 提前导入依赖，给模块设置别名
import * as mapData from '../plugins/data'
import * as countryMap from '../plugins/country'

export default {
    mounted(){
        // 手动调用初始化方法，传入DOM容器和所需数据
        countryMap.init(this.$refs.mapRef, mapData)
    }
}
</script>

注意事项 #

• 如果你的原生JS里绑定了DOMContentLoaded、window.onload这类页面加载事件触发初始化，需要把这部分初始化逻辑单独抽成可调用的函数，因为Vue组件加载时这类页面级事件早就执行完毕，不会再触发。
• 确保data.js、country.js的文件路径和你代码里写的导入路径一致，避免404报错。

内容的提问来源于stack exchange，提问作者Ayoub Aarab