背景

之前项目是运行在node14的，现在需要运行在node18

1. 检查项目中过时的依赖

npm outdated

版本信息说明

Package 显示包名
Current 当前依赖包安装版本
Wanted 根据 package.json 包版本前缀规则可以更新的最新版本号
Latest 最新包版本号【默认情况下是最新的，这取决于开发人员的包管理制度】
Location 是该依赖包在所居于的依赖树中所在的位置

依赖版本认知

项目对应依赖包一般保存在 package.json 文件中，相对应版本号的形式为mojor.minor.patch

major 表示非兼容的重大 API 改变（主要的）
minor 表示向后兼容的功能性改变（次要的）
patch 表示向后兼容的 bug 修正（修补的）

依赖包对应版本号前缀符号含义

• * 匹配最新的 major 版本依赖包
• ^ 匹配最新的 minor 版本依赖包，eg: 1.1.0 可以更新匹配所有 1.x.x 的包，不会更新匹配 2.x.x
• ~ 匹配最新的 patch 版本依赖包，eg: 1.1.0 可以更新匹配所有 1.1.x 的包，不会更新匹配 1.2.x
• 没有前缀表示固定版本号, 版本不会更新匹配任何其他版本。【需要手动修改 package.json 包版本】

2. npm update

更新指定依赖安装包【不一定包括 major 位的更新，有时需要在 package.json 手动更改依赖包相应版本号在更新】

• S dependencies 生产环境下依赖安装(–save)，默认安装
• D devDependencies 开发环境下依赖安装(–save-dev)

npm update packageName (-D | -S)

检查需要 major 规则的依赖

• node-sass
  
  更改package.json

- "node-sass": "^4.12.0",
+ "node-sass": "^8.0.0",

执行 npm i 报错，node-sass 和 sass-loader 的版本不一致

• sass-loader
  查询 node-sass8.0.0 对应 sass-loader 14.0.0，更改 package-lock.json

发现需要更新的都是 ^ 匹配最新的 minor 版本依赖包，所以直接删除 package-lock.json, 然后执行npm install

vue-cli 和依赖不匹配，得升级vue-cli 重新打包
把 vue-cli 升级到5 ，全局也要升级，删除node_nodemodules 和 package-lock.json重新 npm install 还是报错

提示 CopyWebpackPlugin 语法错误 参考文档修改

new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
// 修改为
 new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }
        ]
      }),

修改后运行 npm run serve 报了几百个错误

这里是 sass-loader 语法错误，修改vue.config.js

  // prependData 修改为 additionalData
 css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/scss/_variables.scss";@import "@/assets/scss/main.scss";`
      }
    }
  },

再次执行 npm run serve 还有很多错误，大概是 ts 检测报错，
找到文件 添加一个默认导出 export default

再次执行 npm run serve 终于只有几个错误了

这里还是 sass-loader配置 的错误 main.css 和_variables.scss 都配置了全局引入，他们两个会造成循环引用， 把 main.css 去掉

css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/scss/_variables.scss";`
      }
    }
  },

继续运行 npm run serve

这里是 vuex 的语法 版本之间的差异，按照提示修改 app.ts

继续运行 npm run serve 只剩一个错误了

提示 AxiosRequestConfig 类型不匹配，换成 InternalAxiosRequestConfig

继续运行 npm run serve 完美解决，我太难了