Vue CLI项目中引入本地JS文件并使用全局变量时如何避免“Unexpected token '

在 Vue CLI 项目中引入本地 JS 文件并使用全局变量时遇到 "Unexpected token" 错误，通常是由于 ES6 模块语法与普通脚本的冲突导致的。以下是解决方案：

解决方案

1. 正确引入本地 JS 文件

在 public/index.html 中使用传统 <script> 标签引入：

<!-- 放在 body 最后 -->
<script src="/path/to/your/file.js"></script>

2. 或在 vue.config.js 中配置

module.exports = {
  configureWebpack: {
    externals: {
      // 如果你的JS需要作为外部依赖
      'globalVar': 'GlobalVarName'
    }
  }
}

3. 使用 ES6 模块化导出（推荐）

修改你的本地 JS 文件：

// 原写法（可能导致问题）
var globalVar = {...};

// 改为
const globalVar = {...};
export default globalVar;
// 或
window.globalVar = {...}; // 明确挂载到window

然后在组件中：

import globalVar from '@/assets/js/your-file.js'

4. 配置 Babel 转译

确保该 JS 文件被 Babel 处理：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
      .add('/path/to/your/js')
  }
}

5. 检查文件编码

确保 JS 文件是 UTF-8 编码（无 BOM）。

常见原因

1. 文件包含非标准字符（如 BOM 头）
2. 混合使用了 ES6 模块和传统脚本语法
3. 文件路径错误导致加载失败
4. 文件未正确转译（包含高级语法）

最佳实践

• 对于第三方传统JS库，使用第一种方法
• 对于自己编写的JS，使用模块化方案（第三种方法）
• 确保所有自定义JS文件都放在 src/assets/js/ 目录下

如果问题仍然存在，请检查浏览器控制台的具体错误信息和行号，这能帮助更精确地定位问题。