Vue3基础网站在webOS LG TV上无法加载，寻求技术解决方案

数据老陈

2026-8-6

Vue3网站在webOS LG TV无法加载的排查方案

先查webOS浏览器内核版本
webOS的浏览器基于Chromium，但版本普遍偏旧，Vue3默认编译的代码可能包含它不支持的ES6+语法。按遥控器的*键或者在设置里开启开发者模式，调出控制台查看报错信息，重点关注语法相关的错误提示。
调整项目编译兼容配置
修改package.json里的browserslist，把webOS对应Chromium版本添加进去（比如webOS 5.0对应Chromium 79，就写Chrome >= 79）。同时在vue.config.js里设置transpileDependencies: true，确保所有依赖包都被转译为低版本兼容的代码。
强制输出非ES模块代码
旧浏览器不支持ES模块，在vue.config.js里配置：
```
module.exports = {
  configureWebpack: {
    output: {
      libraryTarget: 'umd'
    }
  }
}
```
或者执行vue add babel确保Babel把代码转成CommonJS格式。
检查静态资源路径
webOS浏览器对路径的处理可能和普通浏览器有差异，避免使用//开头的协议相对路径，改用完整的http/https路径或者相对路径，确保JS、CSS文件能正确加载。

临时关闭生产环境优化
有时候代码压缩、tree-shaking会导致旧浏览器解析失败，先把vue.config.js里的productionSourceMap设为false，同时调整Terser配置强制兼容ES5：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 5,
            compress: { drop_console: false }
          }
        })
      ]
    }
  }
}