Vue 2项目导入第三方JS后变量未定义的问题求助

问题原因分析 #

你遇到的问题核心是模块化环境与全局作用域的差异：

• 传统<script>标签引入脚本时，var CI = {}会自动挂载到浏览器的window对象上，成为全局变量，所以任何地方都能直接访问。
• 但在Vue 2的模块化项目中（默认基于Webpack构建），直接用import引入脚本时，脚本内的变量会被限制在模块局部作用域里，外部代码（比如你的main.js）无法直接访问到CI，自然会抛出ReferenceError。

由于你无法修改Defines.js的代码，我们只能从Vue项目的导入方式入手解决问题。

解决方案 #

方案1：在public/index.html中全局引入脚本（最简单，无额外依赖）

把Defines.js放到项目的public目录下（比如public/afw/Utils/Defines.js），然后在public/index.html的<head>或<body>区域用传统<script>标签引入：

<!-- public/index.html -->
<script src="./afw/Utils/Defines.js"></script>

这样脚本会在Vue应用初始化前执行，CI会被挂载到window全局对象上，之后在main.js或任何组件里都可以直接访问CI（或window.CI）：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

console.log(CI) // 现在能正常访问了
Vue.config.productionTip = false
new Vue({ router, store, render: h => h(App) }).$mount('#app')

方案2：使用script-loader将脚本作为全局代码执行

如果不想修改index.html，可以借助Webpack的script-loader，它会把脚本内容放到全局作用域执行，而非模块局部作用域。

1. 先安装script-loader：

npm install script-loader --save-dev
# 或使用yarn
yarn add script-loader --dev

2. 在main.js里用script-loader前缀指定导入方式：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 用script-loader处理脚本，使其在全局作用域运行
import 'script-loader!./afw/Utils/Defines.js'

console.log(CI) // 正常访问
Vue.config.productionTip = false
new Vue({ router, store, render: h => h(App) }).$mount('#app')

这种方式适合需要在代码逻辑中灵活控制导入时机的场景。

方案3：手动将模块内变量挂载到全局（备选，不推荐生产环境使用）

因为Defines.js里有module.exports = CI.Utils.Define，我们可以先通过require导入脚本，再借助eval将脚本内容放到全局作用域执行（注意：eval存在安全和性能风险，仅作为极端场景的备选）：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 读取脚本内容并在全局作用域执行
const fs = require('fs')
const scriptContent = fs.readFileSync('./afw/Utils/Defines.js', 'utf8')
eval(scriptContent)

console.log(CI) // 正常访问
Vue.config.productionTip = false
new Vue({ router, store, render: h => h(App) }).$mount('#app')

关于依赖CI的Core.js导入 #

只要确保Defines.js已经在全局作用域执行过（比如方案1中提前在index.html引入，或方案2中在导入Core.js前先导入Defines.js），Core.js就能正常访问CI变量。

内容的提问来源于stack exchange，提问作者Athus Vieira