nuxt.js 脚手架搭建项目中不支持ES6语法 ---- 解决办法

最新推荐文章于 2025-05-30 09:05:11 发布
原创 最新推荐文章于 2025-05-30 09:05:11 发布 · 1.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Nuxt 脚手架搭建项目不支持ES6语法完美解决方案

本文介绍了在nuxt.js脚手架搭建的项目中遇到不支持ES6语法的问题及其解决方法。通过在package.json中添加babel-node启用配置，创建.babelrc文件并配置指令集，以及安装babel-preset-es2015，可以使得项目顺利支持ES6模块语法。
nuxt脚手架创建项目
  1. 创建项目
npx  create-nuxt-app  project-app
  1. 运行项目
cd project-app
npm run dev
项目默认为CommonJs语法

由于node.js本身是不支持ES6语法的，我们在其他Vue项目中使用的ES6语法，都是通过babel进行过转译处理的。而这里nuxt框架中，并没有帮助我们默认的转译处理。如果想继续使用ES6模块语法，就需要我们在启动程序中添加配置 并 配置babel的指令集。

解决方法 ----（使支持es6模块语法）
  1. 在package.json中添加启用配置： --exec babel-node
最低0.47元/天 解锁文章
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
🏆 前端领域优质创作者
11-30 5510
vue3路由官方文档，vue3路由文档，vue-router4官方文档，使用Vite构建Vue3项目,对路由VueRouter，Vue3中VueRouter4路由的配置，vue3-vueRouterv4.x，vue3中vue-router4基本使用(路由基本配置)，Vue3-Router@4.x使用，vue-router4.x教程，Vue3中基于vue-router4的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3)，10分钟快速上手VueR
nuxt脚手架创建nuxt项目，不支持ES6语法以及运行nuxt项目，babel-node不是内部或外部命令，也不是可运行的程序
o3otxl的博客
06-23 2849
nuxt项目，不支持ES6语法，需要babel进行转换 首先，在package.json中 dev 和start后加入--exec babel-node 然后在mt-app中创建一个.babelrc的文件，输入如下内容 然后执行指令npm i babel-core babel-preset-es2015 babel-cli 再用npm run dev运行项目。 ...
2.nuxt.js使用es6语法支持sass
XD
09-27 512
支持es6 初始化，修改server/index.js 修改package.json，在dev start后加--exec-babel-node 在根目录下新建.babelrc文件，并配置 项目中安装依赖 npm i babel-cli // 这是babel解释器的客户端主程序 npm i babel-core // babel的核心文件 npm i babel-preset-es201...
解决nuxt官方脚手架的一些坑：1、支持es6+语法 2、样式支持sass
web前端开发
02-27 2364
1、支持ES6+语法，以server/index.js为例，将require修改为ES6的import模式：     初始化：       解决方法：      （1）修改package.json文件，在“dev”和“start”命令后面新增：--exec babel-node              （2）项目根目录下新增babel配置文件“.babelrc”文件，写入以下配置 ...
nuxt配置es6
weixin_42588966的博客
12-20 755
1. 安装相关包 npm i babel-cli babel-core babel-preset-es2015 --save 2. 配置package.json启动命令 3. 配置.babelrc文件 如果没有就自己创建一个，放在根目录下面
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
asdfgh0077的博客
07-05 317
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
同构渲染-Nuxt.js
随风浅入画
10-15 710
一. 概述 Nuxt.js 是一个基于Vue.js 的现代化服务端渲染应用框架，它可以轻松的实现同构应用。 Nuxt.js 主要关注的是应用的 UI渲染。 Nuxt.js可以初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 除此之外，还提供了一种命令叫: nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。 作为框架，Nuxt.js 为 客户端/服务端
使用client-generator打造基于React/Vue.js的PWA及React Native应用
- **生成高质量的TypeScript或ES6组件**: TypeScript提供了强类型系统的优点，有助于代码的维护和开发效率，而ES6是现代JavaScript的语法标准，使得生成的应用更现代、更高效。 - **组件类型**: 包括列表显示、创作...
使用nuxt.js官方脚手架构建koa2的es6编译问题
weixin_33913377的博客
12-10 316
最近在学用nuxt集成koa2做vue后台，发现官方自带脚手架搭建的koa2使用的仍是es5语法，如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的，所以我们首先需要在启动命令后加上 --exec babel-node "scripts": { "dev": "cross-e...
一个基于nuxt的基础架子，支持aixos，sass，es6，elementUI
baochan5498的博客
03-23 157
nuxt官网：Nuxt.js docs github: 项目地址 项目版本说明 package 版本号 "babel-cli" "^6.26.0" "babel-preset-es2015" "^6.24.1" "cross-env" "^5.2.0" "element-ui" "^2.4.11" "koa" "^2.6.2" "node-sass"...
nuxt.js中server兼容ES6的写法
TIANCHUANG8887的博客
07-17 562
1.前提已安装babel-cli，还没安装可通过npm install--save-dev babel-cli安装 2.在package.json文件中，增加红线部分 3.安装npm install--save-dev babel-preset-env 4.然后在.babelrc文件中 转载于:https://www.cnblogs.com/fanbulaile...
浏览器中不能使用ES6的扩展语法...报错
Keep trying, keep going
05-04 1307
，包括Chrome、Firefox、Safari和Edge等。浏览器大多数已经支持ES6（ECMAScript 2015）的扩展语法（
分享：nuxtES6 插件
awseda的博客
06-17 273
ES6 插件 如果插件位于node_modules并导出模块，需要将其添加到transpile构建选项： module.exports = { build: { transpile: ['vue-notifications'] } } 您可以参考 构建配置 文档来获取更多构建选项。 —————————————————————————————————————————— 链接：https://zh.nuxtjs.org/api/configuration-build/#transpile ..
nuxt项目，service 文件支持import es6 写法
weixin_34010566的博客
12-18 437
1.安装babel-preset-es2015npm i babel-preset-es2015复制代码2.配置package.json "scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", "build": "nux...
node之手写脚手架
Welkin_qing的博客
09-07 2177
文章目录一、初始化cli工具（1）创建文件（2）执行文件二、动态获取版本号（1）创建（2）使用三、自定义配置命令（1）配置reflect（2）配置命令行数组（3）配置help命令四、配置create命令（1）配置路径（2）创建create文件（3）通过axios拉取github上的模板信息1. 安装axios2. 获取github上的模板信息3. 设置loading加载样式a. 安装b. 函数如下c. 调用如下4. 设置终端选择功能a. 安装c. 函数如下5. 获取github模板上的版本信息a. 获取ve
NuxtJS
m0_59785331的博客
08-22 342
Vue 同构渲染解决方案
nuxt使用core-js在ie11下的兼容性问题处理
warrah 南极狼
08-05 3293
nuxt ie兼容性问题
Nuxt中的ES Modules(ESM)全面解析
最新发布
gitblog_01112的博客
05-30 466
Nuxt中的ES Modules(ESM)全面解析 【免费下载链接】nuxt The Intuitive Vue Framework. 项目地址: https://gitcode.com/GitHub_Trending/nu/nu...
javascript/typescript模块那些事儿：commonJS和ES module
曲折旅程，艰难人生
01-14 1540
javascript模块最核心的写法
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值