如何在Vue项目的main.js中导入JS库实现全应用全局可用

问题原因 #

ES 模块化的导入默认是模块作用域隔离的：你在main.js里直接写import "mathjs"仅会执行mathjs的模块代码，模块内暴露的方法只会挂载到main.js这个单独模块的顶层作用域，其他组件都是独立的模块，无法跨模块访问其他模块的顶层变量。
你之前误以为导入就能全局可用，是混淆了「模块作用域」和「全局window作用域」的概念：只有把变量明确挂载到window对象上，才会在全页面范围可用，现代前端第三方库默认不会主动污染全局window对象，所以才会出现只有main.js内可访问、其他地方用不了的情况。

解决方案 #

以下是Vue生态下常用的3种实现全局调用的方案，按需选择即可：

方案1：挂载到Vue全局实例（最推荐，符合Vue开发规范） #

不会污染全局window，仅在Vue应用范围内可用：

• Vue3 配置（main.js）：

// 先全量引入mathjs的所有方法
import * as math from 'mathjs'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 挂载到全局实例属性上，命名加$是Vue的约定，用来区分自定义属性和内置属性
app.config.globalProperties.$math = math

app.mount('#app')

调用方式：

• 组件脚本内：this.$math.median(5,4,6,1)
• 模板内直接写：{{ $math.median(1,2,3,4) }}
• Vue2 配置（main.js）：

import * as math from 'mathjs'
import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$math = math

new Vue({
  render: h => h(App)
}).$mount('#app')

调用方式和Vue3完全一致。

方案2：挂载到window全局（适合快速调试，不推荐生产环境用） #

直接把mathjs挂载到浏览器全局对象，所有页面脚本都能直接访问，缺点是容易和其他全局变量冲突：

// main.js内添加
import * as math from 'mathjs'
window.math = math
// 如果只需要单独暴露median方法也可以单独挂载
// window.median = math.median

调用方式：任何地方直接写math.median(5,4,6,1)或者median(5,4,6,1)即可。

方案3：自动导入（工程化项目推荐，无侵入不污染全局） #

如果你的项目用Vite/Webpack构建，可以通过unplugin-auto-import插件实现自动按需导入mathjs的方法，所有组件不用手动写import也能直接调用，也不会产生全局变量：

1. 先安装插件：
   npm i unplugin-auto-import -D
2. 修改Vite/Webpack配置，以Vite为例：

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // 配置需要自动导入的mathjs方法
      imports: [
        {
          'mathjs': ['median', 'add', 'subtract'] // 把你需要用到的方法名都列在这里
        }
      ]
    })
  ]
})

配置完成后所有组件内直接调用median(5,4,6,1)就可以正常运行，不需要额外导入。

内容的提问来源于stack exchange，提问作者Comfort Eagle