Vue2 项目适配M系列 Apple Silicon

Vue2的老项目无法在M系列芯片的Mac上启动,大概率是由于node-sass依赖问题引起的,node-sass的原生二进制在ARM64 Mac上无法编译。解决思路是换Node版本 + 换Sass引擎 + 修复语法兼容性:

  1. 指定Node版本为 ~16

  2. 替换node-sassdart-sass

  • package.json中去掉node-sass依赖

  • 安装"sass":"~1.32.12"

  • 升级项目中的"sass-loader""~7.3.1"

  • 在项目的vue config中的cssLoaders显式指定implementation: require('sass'):

js
sass: generateLoaders('sass', {
  indentedSyntax: true,
  implementation: require('sass')
}),
scss: generateLoaders('sass', {
  implementation: require('sass')
}),
  1. 全局替换/deep/::v-deep

Dart Sass 不再支持/deep/深度选择器语法(会报 deprecation 错误),需要在所有 .vue 和 .scss 文件中:

  • /deep/ .xxx → ::v-deep .xxx
  • /deep/.xxx → ::v-deep.xxx
b97d - fix: update deprecated deep selector syntax in Vue and SCSS files
c83b - feat: add blog vue2 project adaptation for m-series apple silicon
评论加载中 (ง •̀ω•́)ง