@vue/cli 5.0.8 项目依赖版本参照

知了清语2023-11-08 9:58

有的同学，可能是在维护迭代老的项目，脚手架是从 @vue/cli 3.x ，想要升级到 5.x 获得更好的开发体验，可以参照下面的

@vue/cli 应该是以后不会再更新了, 5.0.8应该是最后一个版本，大家可以迁移到 vite相关的生态，迁徙是一条漫长的道路。

依赖包

json 复制代码

  "scripts": {
    "lint-staged": "lint-staged"
 },
 "dependencies": {
    "axios": "^1.5.0",
    "core-js": "^3.30.2",
    "element-ui": "2.15.13",
    "vue": "^2.7.14",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/eslint-parser": "^7.21.8",
    "@commitlint/cli": "^17.6.3",
    "@commitlint/config-conventional": "^17.6.3",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-prettier": "^7.1.0",
    "chalk": "^4.1.2",
    "eslint": "^8.41.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.13.0",
    "husky": "^8.0.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "lint-staged": "^13.2.0",
    "prettier": "^2.8.8",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "semver": "^7.5.1"
  },

稳定运行在node 14.21.3 版本

公司内部项目也很多，部分项目在有时间的条件下，升级到 5.0.8 以后，稳定运行一年以上，没有出现无法解决的问题

其中， chalk 这个必须锁版本号， 4.1.2 ，因为 5.x的版本是采用 ESM的方式，在配置一些脚本，会出现加载报错，还是加载方式的问题。

husky 也是从 4.x 升级到 8.x 版本，也是稳定运行

babel配置

js 复制代码

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@vue/babel-preset-jsx',
      {
        "injectH": false
      }
    ]
  ]
}

其实很多人在开发或者使用webpack等一众脚手架上，出现的问题，很多是版本号对应不上的导致的，这个可以很好的参照

vue从 2.5， 2.6 升级到 2.7 ，需要关注一下 deep语法的改变即可

sass 和less 深度选择器

html 复制代码

<style lang="scss" scoped>
<!--语法错误-->

/deep/ .box {}

<!---语法警告 能运行 但是不建议这样写-->
::v-deep .box {}

<!--推荐 正确写法-->
:deep(.el-menu) {

}
</style>