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

最新推荐文章于 2024-05-04 10:22:02 发布
最新推荐文章于 2024-05-04 10:22:02 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： VUE 文章标签： Nuxt 脚手架搭建项目不支持ES6语法完美解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Riona_cheng/article/details/103143058
版权
本文介绍了在nuxt.js脚手架搭建的项目中遇到不支持ES6语法的问题及其解决方法。通过在package.json中添加babel-node启用配置，创建.babelrc文件并配置指令集，以及安装babel-preset-es2015，可以使得项目顺利支持ES6模块语法。
摘要由CSDN通过智能技术生成
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中添加启用配
最低0.47元/天 解锁文章
-小橙子-
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
王佳斌
11-30 3731
vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR
nuxt脚手架创建nuxt项目，不支持ES6语法以及运行nuxt项目，babel-node不是内部或外部命令，也不是可运行的程序
o3otxl的博客
06-23 2759
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运行项目。 ...
解决nuxt官方脚手架的一些坑：1、支持es6+语法 2、样式支持sass
web前端开发
02-27 2263
1、支持ES6+语法，以server/index.js为例，将require修改为ES6的import模式：     初始化：       解决方法：      （1）修改package.json文件，在“dev”和“start”命令后面新增：--exec babel-node              （2）项目根目录下新增babel配置文件“.babelrc”文件，写入以下配置 ...
2.nuxt.js使用es6语法支持sass
XD
09-27 432
支持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配置es6
weixin_42588966的博客
12-20 680
1. 安装相关包 npm i babel-cli babel-core babel-preset-es2015 --save 2. 配置package.json启动命令 3. 配置.babelrc文件 如果没有就自己创建一个，放在根目录下面
使用nuxt.js官方脚手架构建koa2的es6编译问题
weixin_33913377的博客
12-10 265
最近在学用nuxt集成koa2做vue后台，发现官方自带脚手架搭建的koa2使用的仍是es5语法，如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的，所以我们首先需要在启动命令后加上 --exec babel-node "scripts": { "dev": "cross-e...
一个基于nuxt的基础架子，支持aixos，sass，es6，elementUI
baochan5498的博客
03-23 101
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入口文件不能使用import
ZQD的博客
10-11 2740
解决Nuxt.js项目server入口文件不能使用import 使用nuxtjs官方的脚手架时创建Nuxt.js项目时 在server的入口中使用的是默认使用require引入依赖的 const Koa = require('koa') const consola = require('consola') const { Nuxt, Builder } = require('nuxt') ...
nuxt vue node mysql_[vue] vue服务端渲染nuxt.js
weixin_33598481的博客
01-28 254
初始化使用脚手架工具 create-nuxt-app 快速创建npx create-nuxt-app npx create-nuxt-app 执行一些选择在集成的服务器端框架之间进行选择:选择您喜欢的 UI 框架:选择您喜欢的测试框架:选择你想要的 Nuxt 模式 (Universal or SPA)添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。添加 EsLint...
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
asdfgh0077的博客
07-05 251
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt.js中server兼容ES6的写法
TIANCHUANG8887的博客
07-17 493
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 578
，包括Chrome、Firefox、Safari和Edge等。浏览器大多数已经支持ES6（ECMAScript 2015）的扩展语法（
分享：nuxtES6 插件
awseda的博客
06-17 218
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 386
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 1883
文章目录一、初始化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 254
Vue 同构渲染解决方案
Nuxt.js项目搭建配置踩坑
weixin_30632089的博客
06-25 1948
公司项目需要用到nuxt.js的服务端渲染，所以使用了nuxt.js官方的脚手架搭建了项目，在这儿记录一些搭建过程中踩过的坑。 IE9的适配问题 IE9是一个老大难的问题，因为它不支持ES6的语法，而且ie9也不知路由中的history模式，所以我在这儿暂时的解决办法如下。文档>> // nuxt.config.js /* ** Global router midd...
javascript/typescript模块那些事儿：commonJS和ES module
曲折旅程，艰难人生
01-14 1041
javascript模块最核心的写法
Nuxt.js项目创建全流程图解：从安装到配置详解
Nuxt.js是一个强大的Universal Vue.js开发框架，它专注于提供客户端/服务器端渲染的解决方案，旨在简化UI构建过程并支持灵活的架构设计。创建一个Nuxt.js项目的过程可以分为以下几个关键步骤： 1. **安装** - **...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值