Vue.js项目npm run build无错但浏览器报unexpected token求助

这种情况我在维护老项目时碰到过好几次，大概率是资源加载、编译配置或者服务器环境的问题，给你列几个实用的排查方向：

• 检查服务器的静态资源MIME类型配置
  很多时候服务器会错误地把JS文件当成纯文本或其他类型返回，导致浏览器解析失败。你可以先在浏览器控制台的Network面板里，查看那几个报错JS文件的Response Headers，确认Content-Type是不是application/javascript。

  • 如果是Nginx服务器，要确保配置里有：

    types {
        application/javascript js;
    }
    

  • 如果是Apache，可在.htaccess或主配置文件中添加：

    AddType application/javascript .js
    

• 验证构建产物是否被服务器篡改
  部分廉价虚拟主机或服务器会自动给静态文件插入广告、水印或额外注释，这会破坏JS文件的语法结构。你可以把本地dist文件夹里的JS文件和服务器上的对应文件做对比，看看内容有没有被莫名添加的代码（比如奇怪的HTML标签、陌生脚本）。如果有，要么联系服务商关闭该功能，要么换个干净的服务器环境。

• 检查Vue构建配置的转译范围
  有些第三方依赖库没有做ES5转译，生产构建后会留下未转译的ES6+语法，旧浏览器就会报unexpected token。你可以在vue.config.js（或webpack.config.js）里调整转译配置：

  module.exports = {
    // 把未转译的依赖包名填进去，不确定的话先设为true全量转译试试
    transpileDependencies: ['某些依赖包名']
  }
  

  另外要确认target配置在生产环境是web，不要设成node或其他值。

• 核对浏览器兼容性配置
  看看package.json里的browserslist配置，生产环境是否覆盖了你需要支持的浏览器版本。比如如果要兼容IE11，配置应该类似：

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "IE 11"
  ]
  

  这个配置会直接影响Babel的转译范围，配置不当会导致部分语法未被转译。

• 确认资源路径是否正确解析
  虽然服务器返回了200，但路径配置错误可能导致浏览器拿到的不是正确的JS文件。比如你设置了publicPath为相对路径，但服务器部署在子目录下，或者Nginx的root指向了错误的文件夹。你可以直接在浏览器地址栏访问那几个JS文件的URL，看看能不能正常显示纯JS代码，而不是404页面或其他无关内容。

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