Vue 报错 decorators-legacy 解决方案

最新推荐文章于 2024-04-11 09:55:28 发布

原创最新推荐文章于 2024-04-11 09:55:28 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何配置.Babelrc文件，特别是针对装饰器的支持。通过设置`@babel/plugin-proposal-decorators`插件，并启用`legacy`选项，可以为项目启用ES7装饰器的向后兼容支持，便于进行元编程操作。

安装插件

.babelrc

[
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一天28小时

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端框架系列之(vue-property-decorator)

vv_bug

06-15

6403

简介：这节我们继续解析一个叫vue-property-decorator的第三方库，首先可以看它官网的一个介绍： This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component), so please read its README before using this library. 也就是说它是基于vue-class-component库的，在上一篇文章中我们介绍了如何在v

前端框架系列之（vue-class-component）

vv_bug

06-14

5588

简介：说到函数式组件跟类组件在react官方就有提供，具体差异的话大家可以自行查阅react开发文档，下面我们看一下在react中怎么使用这两种方式定义组件：函数式组件： function Welcome (props) { return <h1>Welcome {props.name}</h1> } 类组件： class Welcome extends React.Component { render() { return ( <h1>

参与评论您还未登录，请先登录后发表或查看评论

babel-plugin-transform-decorators-legacy：Babel 6的插件（主要用于）复制Babel 5的旧装饰器行为

02-19

Babel Legacy Decorator插件这是Babel 6的插件，旨在从Babel 5复制旧的装饰器行为，以使人们可以更轻松地过渡到Babel 6，而无需在装饰器提案的更新上受阻或让Babel重新实现它。通天塔> = 7.x 该插件专门用于Babel6.x。如果您使用的是Babel 7，则此插件不适合您。 Babel 7的@babel/plugin-proposal-decorators正式支持此插件具有的相同逻辑，但与Babel 7的其他插件更好地集成。您可以启用 { " plugins " : [ [ " @babel/plugin-proposal-decorators " , { " legacy " : true }], ] } 在您的Babel配置中。请注意，如果您想获得与transform-decorators-legacy相同的行为，则

装饰器 decorator

想起来，就学习一下

09-12

213

decorator让你的页面更加华丽 decorator是什么专业的讲，是一个表达式，用于修改类的行为；通俗的讲，好比你的手机，给他添加了一个外壳，但并不影响他通话和充电的功能；这就是装饰器。 ...

vue项目加入decorator

风吹过的博客

12-25

639

.eslintrc 在此文件中的选项parserOptions加入 ecmaFeatures:{ // 支持装饰器 legacyDecorators: true } 支持了之后就不会报 Parsing error: Stage 2 decorators disallow object literal property decorators 错误然后就可以愉快的在项目中使用decorator了，不需要额外的安装 @babel/plugin-proposal-deco

gitblog_00099的博客

04-11

491

react-native配置decorators-legacy支持修饰符

菜菜鸟的博客

10-28

619

1. 下载依赖 yarn add @babel/plugin-proposal-decorators //如果是npm 不推荐使用会导致旧包的丢失 // npm install --save-dev @babel/plugin-proposal-decorators 2. 配置文件 babel.config.js中配置插件 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [

{ "name": "vue-typescript-admin-template", "version": "0.1.0", "private": true, "author": "Chong Guo <armourcy@gmail.com>", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:uat": "vue-cli-service build --mode production.uat", "lint": "vue-cli-service lint", "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6", "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit" }, "dependencies": { "@types/echarts": "^4.4.6", "@types/webpack": "^4.41.12", "area-data": "^5.0.6", "axios": "^0.19.0", "echarts": "^5.3.2", "element-ui": "^2.12.0", "js-cookie": "^2.2.1", "md5": "^2.3.0", "moment": "^2.24.0", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", "path-to-regexp": "^3.0.0", "register-service-worker": "^1.6.2", "vue": "^2.6.10", "vue-area-linkage": "^5.1.0", "vue-class-component": "^7.1.0", "vue-property-decorator": "^8.2.2", "vue-router": "^3.1.2", "vue-svgicon": "^3.2.6", "vuex": "^3.1.1", "vuex-class": "^0.3.2", "vuex-module-decorators": "^0.10.1", "vuex-persistedstate": "^2.7.0" }, "devDependencies": { "@types/jest": "^24.0.18", "@types/js-cookie": "^2.2.2", "@types/nprogress": "^0.2.0", "@types/webpack-env": "^1.14.0", "@vue/cli-plugin-babel": "^3.11.0", "@vue/cli-plugin-e2e-cypress": "^3.11.0", "@vue/cli-plugin-eslint": "^3.11.0", "@vue/cli-plugin-pwa": "^3.11.0", "@vue/cli-plugin-typescript": "^3.11.0", "@vue/cli-plugin-unit-jest": "^3.11.0", "@vue/cli-service": "^3.11.0", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", "eslint": "^6.2.2", "eslint-plugin-vue": "^5.2.3", "fibers": "^4.0.2", "jest": "^24.9.0", "sass": "^1.22.10", "sass-loader": "^7.3.1", "style-resources-loader": "^1.2.1", "ts-jest": "^24.0.2", "typescript": "3.6.2", "vue-cli-plugin-element": "^1.0.1", "vue-cli-plugin-style-resources-loader": "^0.1.3", "vue-template-compiler": "^2.6.10", "webpack": "^4.39.3" } } PS D:\My JAVA\苍穹外卖\前端源码\苍穹外卖前端源码\project-sky-admin-vue-ts> npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vue-typescript-admin-template@0.1.0 npm ERR! Found: vue@undefined npm ERR! node_modules/vue npm ERR! vue@"^2.6.10" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@">=2.2.0" from vue-area-linkage@5.1.0 npm ERR! node_modules/vue-area-linkage npm ERR! vue-area-linkage@"^5.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\liuchaokun\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\liuchaokun\AppData\Local\npm-cache\_logs\2025-07-28T03_08_03_535Z-debug-0.log

07-29

##### ✅ 方案一：使用 `--legacy-peer-deps` 忽略冲突（推荐优先尝试） ```bash npm install --legacy-peer-deps ``` 此命令会跳过 peerDependencies 检查，允许安装继续[^1]。适用于临时解决冲突且项目能正常运行...

在一台电脑上执行vite项目的npm run build 时报下面的错 [vite:vue] This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy".在另一台电脑上正常

06-09

["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }] ] } ``` 注意，如果你的配置文件是 `babel.config.js`，需要将 `plugins` 的...

PS D:\My JAVA\苍穹外卖\前端源码\苍穹外卖前端源码\project-sky-admin-vue-ts> npm list vue vue-typescript-admin-template@0.1.0 D:\My JAVA\苍穹外卖\前端源码\苍穹外卖前端源码\project-sky-admin-vue-ts └── (empty) PS D:\My JAVA\苍穹外卖\前端源码\苍穹外卖前端源码\project-sky-admin-vue-ts> npm list vue-area-linkage vue-typescript-admin-template@0.1.0 D:\My JAVA\苍穹外卖\前端源码\苍穹外卖前端源码\project-sky-admin-vue-ts └── (empty) { "name": "vue-typescript-admin-template", "version": "0.1.0", "private": true, "author": "Chong Guo <armourcy@gmail.com>", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:uat": "vue-cli-service build --mode production.uat", "lint": "vue-cli-service lint", "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6", "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit" }, "dependencies": { "@types/echarts": "^4.4.6", "@types/webpack": "^4.41.12", "area-data": "^5.0.6", "axios": "^0.19.0", "echarts": "^5.3.2", "element-ui": "^2.12.0", "js-cookie": "^2.2.1", "md5": "^2.3.0", "moment": "^2.24.0", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", "path-to-regexp": "^3.0.0", "register-service-worker": "^1.6.2", "vue": "^2.6.10", "vue-area-linkage": "^5.1.0", "vue-class-component": "^7.1.0", "vue-property-decorator": "^8.2.2", "vue-router": "^3.1.2", "vue-svgicon": "^3.2.6", "vuex": "^3.1.1", "vuex-class": "^0.3.2", "vuex-module-decorators": "^0.10.1", "vuex-persistedstate": "^2.7.0" }, "devDependencies": { "@types/jest": "^24.0.18", "@types/js-cookie": "^2.2.2", "@types/nprogress": "^0.2.0", "@types/webpack-env": "^1.14.0", "@vue/cli-plugin-babel": "^3.11.0", "@vue/cli-plugin-e2e-cypress": "^3.11.0", "@vue/cli-plugin-eslint": "^3.11.0", "@vue/cli-plugin-pwa": "^3.11.0", "@vue/cli-plugin-typescript": "^3.11.0", "@vue/cli-plugin-unit-jest": "^3.11.0", "@vue/cli-service": "^3.11.0", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", "eslint": "^6.2.2", "eslint-plugin-vue": "^5.2.3", "fibers": "^4.0.2", "jest": "^24.9.0", "sass": "^1.22.10", "sass-loader": "^7.3.1", "style-resources-loader": "^1.2.1", "ts-jest": "^24.0.2", "typescript": "3.6.2", "vue-cli-plugin-element": "^1.0.1", "vue-cli-plugin-style-resources-loader": "^0.1.3", "vue-template-compiler": "^2.6.10", "webpack": "^4.39.3" } }

最新发布

07-29

npm install vue-area-linkage area-data --legacy-peer-deps ``` #### 方法5：检查package.json中的依赖版本确保package.json中vue的版本指定正确，例如： ```json "dependencies": { "vue": "^2.6.14", "vue-...

React的decorators装饰器报错@

lfy_wybss的博客

12-22

6369

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators". 对修饰器的实验支持功能在将来的版本中可能更改。在 "tsconfig" 或 "jsconfig" 中

react 项目支持装饰器写法 Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled

雷佳佳的博客

02-24

2221

Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled 有道云翻译过来意思为：目前还不支持实验性语法“decorator -legacy” 其实大概意思就是装饰器语法不支持呗！报错如下图：遇到问题，肯定第一时间百度，看大家有没有遇到类似情况，如何解决的，参考答案几乎都是： npm ins...

Vue3.x的版本中build后dist文件中出现legacy的js文件

小火车况且况且况且的博客

05-14

2933

Vue3.x的版本中build后dist文件中出现legacy的js文件 1. 问题描述出现的主要原因可以参照 vue脚手架文档的解释(这里是英文文档, 主要是目前老夫写这个博客时, 中文文档没有这个页面) vue现代模式说明老夫的理解其实就是官方目前为了开启<script type="module">的现代模式, 又为了适配低版本的浏览器从而添加<script nomodule>, 其实最直观的感受就是打包的速度变慢了 🚨🚨🚨 老夫使用的是yarn各位彦祖可以直接替换为npm的

Vue打包问题汇总：legacy、runtime.js

彭世瑜的博客

03-13

1198

解决办法是添加兼容的浏览器。

vue工程屏蔽打包legacy文件

qq407949480的博客

03-16

3194

我们在进行vue工程(@vue/cli 5.0.1搭建的工程)打包的时候，总是会生成类似539-legacy.48fd84f6.js这种类型文件，这其实兼容低版本浏览器而生成的文件，如果我们的前端工程只在google等现代浏览器版本上跑，打包的时候可以屏蔽build-legacy文件，方式也很简单找到.browserslistrc。后面添加一句话即可 not ie <= 11 ...

react之装饰器报错：This experimental syntax requires enabling one of the following parser plugin(s): “decor

liuye066的专栏

11-16

6980

在学习mobx时，遇到了“This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (5:0)“的错误，每次在@observer那里报错。在App.js中调用MobDemo：在App.js中引入countStore，并将它赋值给store。2、在项目的根目录下创建config-overrides.js文件，并对应加入以下内容。

vue运行之神奇的npm install --legacy-peer-deps

我的专栏

08-26

3934

网上找个例子，运行的时候各种冲突，各种报错。直到运行了神奇的npm install --legacy-peer-deps指令才成功。记录如下：

解决Vue报错：Legacy octal literals are not allowed in strict mode.

weixin_45802287的博客

02-08

1250

JS严格模式

目前尚未启用对实验语法“ decorators-legacy”的支持

qq_41536505的博客

12-05

1400

** 目前尚未启用对实验语法“ decorators-legacy”的支持 ** 解决方案： npm install --save-dev @babel/plugin-proposal-decorators 在package.json里面的plugins添加配置 ["@babel/plugin-proposal-decorators", { "legacy": true }] 重新启动项目 ...