Nuxt项目支持import写法的最新解决方案
最近在看Nuxt开发vue项目的视频,视频中讲到Nuxt项目不支持es6的import写法。并提供了解决方案:
1.在package.json中添加我标红的部分:
"scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", "build": "nuxt build", "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "test": "jest" },
2.根目录创建babel配置文件.babelrc,如果已经存在该文件就修改
内容如下:
{ "presets":["es2015"] }
3.安装 babel-preset-es2015
npm install babel-preset-es2015
4.重新执行 npn run dev
视频中介绍的就是这4个步骤。我截止写文之前,网上搜索结果也基本是上面这种解决方案。
但是&重点来了!!!截止2019年1月,原有的 babel-preset-es2015 写法已经废弃,与之代替的是 babel-preset-env 或者 @babel/preset-env ,目前以后者为推荐。
下面说下如何实现用 @babel/preset-env 让Nuxt 项目支持import 写法。
1.安装 @babel/cli、@babel-core、@babel/preset-env、@babel/node 这4个你项目中没有安装的包
npm install @babel/cli @babel-core @babel/preset-env @babel/node -D
想知道你已经安装了哪些包,直接看 package.json 文件中的 "devDependencies" 。
这里提一下 @babel/cli 与 babel-cli 的区别:
@babel/cli是7.0以后的版本的命名方式,bable-cli是之前的。如下图所示:
我使用的是7.0以后的版本,所以安装的包都是以@babel开头的。
在babel 7.x 以前,babel-node通过安装bable-cli包即可。
在Babel 7.x 以后,babel 的模块被被拆分。因此需要单独安装 @babel/node。
2.修改.babelrc文件
{ "env": { "test": { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] } } }
3.修改package.json文件
就是下面我代码块标红的地方
"scripts": { "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node --presets @babel/env", "build": "nuxt build", "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node --presets @babel/env", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "test": "jest" },
4.执行 npm run dev 即可,这时我们可以看到项目正常运行起来了。
其实也是开始提到的那4步。只是把版本升级了一下而已~~
原文地址:https://www.cnblogs.com/sese/p/11976250.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android使用RecyclerView实现今日头条频道管理功能
- Liunx(centos8)下的yum的基本用法和实例(推荐)
- Android中LeakCanary检测内存泄漏的方法
- Linux 查看磁盘IO并找出占用IO读写很高的进程
- Android实现简单的拨号器功能
- Android调用系统自带浏览器打开网页的实现方法
- Linux之删除带有空格的文件(不是目录)
- Android自定义AvatarImageView实现头像显示效果
- 如何使用win10内置的linux系统启动spring-boot项目
- Android 实现单线程轮循机制批量下载图片
- Android开发之项目模块化实践教程
- Linux centos7 下安装 phpMyAdmin的教程
- 简单学习Android TextView
- Android 滑动返回Activity的实现代码
- centos7搭建hadoop2.10高可用(HA)