场景分析(xb笔记可以跳):
基于vue-cli3.0项目打包完成后,用node做服务器渲染,发现生产的文件配置里使用require进行包的导入,想让他也支持import方式的导入(也就是想使用ES6的import/export代替require)

报错步骤:
→ 首先构建nuxt有两种方式,一种是模版的方式进行创建,第二种就是现在这种通过nuxt@2.0.0升级的脚手架构建方式进行构建nuxt文件,两种的区别:前者是通过babel进行处理后,所以里面是可以使用import进行导入内容的
后者是通过npm run dev方式启动项目,其中dev中的命令是这样的"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",他是通过node进行服务器的启动更新并没有经过babel处理,所以是不支持import指令的,其中nodemon是监听和热更新的服务端脚本的,那我这个应该就不需要修改,我们应该考虑如何添加babel让它新增对import的识别,根据官网描述添加如下package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node", //添加内容为  --exec babel-node
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",//添加内容为  --exec babel-node
    "generate": "nuxt generate"
 },

→ 接着在项目目录创建 .babelrc文件(根目录),文件配置如下,主要是给bebal-node配置指令集:

{
    "presets": ["es2015"]
}

→ 其次通过命令行再安装一下对应的插件:

$ npm install babel-preset-es2015

→ 最后运行$ npm run dev时出现下面这个报错:

$ npm run dev

> mt-app@1.0.0 dev ▒▒▒▒▒▒▒▒▒▒
> cross-env NODE_ENV=development nodemon --exec babel-node server/index.js --watch server

[nodemon] ▒▒▒▒▒
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: D:▒▒▒▒▒**/*
[nodemon] starting `babel-node server/index.js`
'babel-node' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
[nodemon] app crashed - waiting for file changes before starting...

然后查了一下文档和逛一下社区看看,最后试了一下这个方式,发现不报错了:

→ 安装的时候需要安装另外两个babel-core和babel-cli,即:

 npm i babel-core babel-preset-es2015 babel-cli

记住安装完成后,重新编译npm run dev,然后发现就不报错了;如果还会报错的话,将babel-preset-es2015卸载再重装一下,卸载命令npm uninstall babel-preset-es2015,再重启一下就行了

Logo

前往低代码交流专区

更多推荐