vue项目线上环境报错 Uncaught SyntaxError: Unexpected token '<' ---app.js

### 解决 Vue3 打包后出现 `Uncaught SyntaxError: Unexpected token <` 的方案 #### 1. 检查 HTML 文件中的 `<script>` 标签路径 确保所有的 `<script>` 和其他资源标签指向的是实际存在的静态文件。如果路径不正确，浏览器可能会尝试加载不存在的文件并返回HTML错误页，这会导致解析JavaScript时遇到意外的 `<` 符号[^3]。 #### 2. 验证构建输出目录结构 确认项目的 `.env` 或者 `vue.config.js` 中设置的公共路径 (`publicPath`) 是正确的，并且与Nginx或其他服务器上的部署位置相匹配。错误的路径可能导致请求被重定向至首页或者其他页面而不是预期的静态资源[^4]。 #### 3. 审核 JavaScript 文件内容 打开引发此问题的具体JS文件（通常是从控制台日志中找到），仔细检查其内部是否存在任何非标准字符或未闭合的语法元素。特别注意是否有残留的HTML标签或者特殊符号如 `<`, 这些都可能是由于模板编译失败造成的[^5]。 #### 4. 清理缓存重新构建项目 有时候旧版本的缓存数据可能干扰新生成的结果。可以先清除node_modules以及dist文件夹后再执行安装依赖和打包命令： ```bash rm -rf node_modules dist npm install npm run build ``` #### 5. 调整 Nginx 配置以支持单页应用 (SPA) 对于基于Vue Router的历史模式的应用程序来说，需要调整web server来处理所有路由请求都将它们导向index.html。以下是适用于大多数情况的标准Nginx配置片段： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 通过上述措施应该能够有效解决大部分情况下由该错误引起的问题。不过具体情况还需要根据自身的开发环境做适当调整。

### 解决方案 当遇到 `Uncaught SyntaxError: Unexpected token '{'` 错误时，通常是因为加载的 JavaScript 文件存在问题或者路径配置不正确。以下是可能的原因以及对应的解决方案： #### 1. **PDF.js 版本兼容性** 如果使用的 PDF.js 版本较新，而项目环境未完全适配，则可能导致解析错误。建议确认当前项目的 Node.js 和 Webpack 版本是否满足 PDF.js 的最低依赖要求[^1]。 ```javascript // 确认版本匹配 import PDFJS from 'pdfjs-dist/webpack'; console.log(PDFJS.version); // 输出版本号以验证安装是否正常 ``` #### 2. **资源文件缺失或路径错误** PDF.js 运行时需要额外的 worker 文件（如 `pdf.worker.js`）。如果该文件未能正确加载，可能会引发类似的语法错误。确保在项目中正确引入 worker 文件，并将其路径配置为绝对路径[^1]。 ```javascript // 正确引入 pdf.worker.js import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist'; GlobalWorkerOptions.workerSrc = '/path/to/pdf.worker.js'; // 替换为实际路径 const loadingTask = getDocument('example.pdf'); loadingTask.promise.then(pdf => { console.log(`PDF loaded with ${pdf.numPages} pages`); }); ``` #### 3. **HTML 或模板中的字符转义问题** 某些情况下，HTML 模板中的特殊字符（如 `<`, `{`, `}`）未被正确处理也可能导致此错误。检查 HTML 文件是否存在未闭合标签或其他非法字符[^3]。 ```html <!-- 确保 iframe 路径拼接无误 --> <iframe :src="'/static/pdf/web/viewer.html?file=' + encodeURIComponent(src)" class="pdf-viewer"></iframe> ``` > 使用 `encodeURIComponent` 方法可以有效防止 URL 中的特殊字符引起的问题。 #### 4. **跨域请求限制** 如果 PDF 文件存储于远程服务器且存在跨域策略限制，浏览器会阻止其访问并抛出异常。此时需修改 `viewer.js` 文件禁用部分安全校验逻辑[^2]。 ```javascript // 修改 viewer.js 文件 if (origin !== viewerOrigin && protocol !== "blob:") { // 注释掉以下代码片段 // throw new Error("file origin does not match viewer's"); } ``` #### 5. **Webpack 构建优化** 对于 Vue CLI 3.x 用户，在构建过程中可能出现打包混乱的情况。尝试调整 Webpack 配置以单独分离 PDF.js 工具链[^3]。 ```javascript module.exports = { configureWebpack: { externals: { 'pdfjs-dist/build/pdf': 'pdfjsLib', 'pdfjs-dist/web/pdf_viewer': 'PdfJsWebViewer' } } }; ``` --- ### 总结 通过以上方法逐一排查问题根源，可显著降低因语法错误引起的运行失败概率。务必优先核实基础资源配置准确性，再逐步深入分析复杂场景下的潜在冲突因素。