Vue CLI项目中引入本地JS文件并使用全局变量时如何避免“Unexpected token '
2024-02-12 00:33:39
在 Vue CLI 项目中引入本地 JS 文件并使用全局变量时，若遇到 Unexpected token '<' 错误，通常是由于构建工具（如 webpack）未正确处理脚本文件导致的。以下是具体原因和解决方案：
错误原因- 构建工具冲突：Vue CLI 默认使用 webpack 打包，而直接在 index.html 中通过 <script> 标签引入的 JS 文件不会被 webpack 处理。
- 路径解析错误：当 webpack 无法找到文件时，会返回 HTML 格式的 404 页面，导致脚本解析时出现 < 符号（HTML 标签开头）。
移动文件：
将 test2.js 放入 public/static/js/ 目录（例如 public/static/js/test2.js）。
Vue CLI 会直接复制 public 目录下的文件到输出目录（如 dist），无需 webpack 处理。
在 index.html 中引入：
在 public/index.html 的 <head> 或 <body> 中添加：<script src="/static/js/test2.js"></script>
注意：路径需以 / 开头，确保从根目录加载。
在 Vue 组件中使用全局变量：
确保 test2.js 已定义全局变量（如 window.myVar = ...）。
在 Vue 组件中直接访问：export default { mounted() { console.log(window.myVar); // 直接使用全局变量 }}
将 JS 文件放入 src 目录：
将 test2.js 移至 src/assets/js/ 或 src/utils/。
在 Vue 组件中导入：
使用 import 语句引入：import { myVar } from '@/assets/js/test2.js'; // 或 '@/utils/test2.js'
注意：需确保 test2.js 使用 ES6 模块导出（如 export const myVar = ...）。
重构为 Vue 组件（推荐）：
如果 test2.js 包含复杂逻辑，建议将其封装为 Vue 组件或插件：// src/utils/globalMixin.jsexport default { data() { return { myVar: 'value' }; }};// main.jsimport globalMixin from '@/utils/globalMixin';Vue.mixin(globalMixin);
避免直接使用全局变量：
全局变量可能导致命名冲突和难以维护的代码。
优先使用 Vue 组件、Vuex 状态管理 或 提供/注入（Provide/Inject）。
路径配置：
若通过 public 目录引入，确保路径在开发和生产环境一致。
若通过 import 引入，使用 @/ 别名指向 src 目录。
模块化规范：
确保 test2.js 使用 ES6 模块（export/import）或 CommonJS（module.exports/require）。
- public/static/js/test2.js：window.myVar = 'Hello from public!';
- public/index.html：<script src="/static/js/test2.js"></script>
- src/components/test2.vue：export default { mounted() { console.log(window.myVar); // 输出: "Hello from public!" }}
- src/utils/test2.js：export const myVar = 'Hello from module!';
- src/components/test2.vue：import { myVar } from '@/utils/test2.js';export default { mounted() { console.log(myVar); // 输出: "Hello from module!" }}
- 错误根源：webpack 未处理直接引入的脚本文件。
- 推荐方案：
简单全局变量：放入 public 目录并通过 index.html 引入。
复杂逻辑：重构为模块或 Vue 组件，使用 import 导入。
- 最佳实践：避免全局变量，优先采用组件化或状态管理。
热门标签
