Nuxt项目运行npm run dev时Highcharts报window not defined错误排查问询

• 对齐包管理器锁文件：先确认原有设备/生产环境使用的是package-lock.json、yarn.lock还是pnpm-lock.yaml，新设备安装依赖时必须使用和旧环境完全一致的锁文件，不要直接执行npm install忽略锁文件，否则会自动安装符合语义化版本要求的最新兼容版，极易出现版本差异
• 对比依赖版本：本地执行npm ls highcharts highcharts-vue，在生产环境/原有设备执行相同命令，直接对比两个依赖的实际安装版本号
• 检查版本声明规则：查看package.json中highcharts、highcharts-vue的版本号前缀，不带^/~的为固定版本，可直接对比版本号是否一致

该报错本质原因是Nuxt为服务端渲染框架，服务端运行环境不存在window对象，你当前代码在组件script顶层直接导入highcharts-vue并全局注册，而你新设备安装的highcharts-vue版本调整了代码结构，在模块初始化阶段就直接引用了window，服务端执行时就会触发报错。原有设备/生产环境使用的旧版本highcharts-vue仅在组件挂载阶段才调用window，因此不会触发该报错，并非缺少依赖导致。

提供三种可落地的解决方案，可按需选择：

方案1：注册为客户端插件（最规范） #

将highcharts相关的导入和注册逻辑剥离为仅客户端执行的插件，避免服务端执行相关代码：

1. 修改nuxt.config.js配置，新增客户端插件声明：

export default {
  // 其他配置保持不变
  plugins: [
    { src: '~/plugins/highcharts.js', mode: 'client' }
  ]
}

2. 新建plugins/highcharts.js文件，写入以下内容：

import Vue from 'vue';
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';
import stockInit from 'highcharts/modules/stock';

stockInit(Highcharts);
Vue.use(HighchartsVue);

3. 删除原有Highcharts组件script顶部的highcharts相关导入、注册代码即可正常运行。

方案2：组件内仅客户端导入注册 #

如果不想修改全局配置，可直接调整原有Highcharts组件的导入逻辑，将导入和注册移到客户端执行的生命周期内：

1. 删除组件script顶部import HighchartsVue from 'highcharts-vue'、Vue.use(HighchartsVue)两行代码
2. 在mounted钩子的process.client判断块内新增导入注册逻辑：

mounted() {
  if (process.client) {
    const HighchartsVue = require('highcharts-vue').default;
    Vue.use(HighchartsVue);
    // 原有mounted逻辑保持不变
  }
}

方案3：锁定依赖版本回退 #

如果不想修改业务代码，可直接将依赖版本锁定为原有环境可用的版本：

1. 确认原有环境highcharts、highcharts-vue的版本号，修改package.json中两个依赖的版本声明，去掉^/~前缀，写死为固定版本号
2. 删除本地node_modules文件夹和对应的包管理器锁文件
3. 重新执行npm install安装依赖即可

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