解决Nuxt.js项目server入口文件不能使用import

最新推荐文章于 2024-08-19 02:50:31 发布

duangdong9

最新推荐文章于 2024-08-19 02:50:31 发布

阅读量2.7k

点赞数

分类专栏： # SSR 文章标签： nuxtjs import

本文链接：https://blog.csdn.net/ZQD666/article/details/102509035

版权

SSR 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Nuxt.js项目中遇到server入口文件不能使用import的问题及其解决方案。通过修改package.json的脚本命令，添加相关依赖，并创建.babelrc文件进行配置，可以使得Nuxt.js支持import语法。

摘要由CSDN通过智能技术生成

解决Nuxt.js项目server入口文件不能使用import

使用nuxtjs官方的脚手架时创建Nuxt.js项目时

在server的入口中使用的是默认使用require引入依赖的

const Koa = require('koa')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')

对于使用经常使用ES6的，使用起来会感觉很大的不便

但当我们直接使用import导入的时候

import Koa from 'koa'
import consola from 'consola'
import { Nuxt, Builder } from 'nuxt'

项目会直接报错，它并不能识别import

解决方法：

Nuxt.js项目在npm run dev时直接使用node编译index.js，我们之前写的项目之所以可以，是因为有用babel去处理，但node本身是不支持这种语法的

在package.json中的脚本scripts中测试环境和正式环境的命令后加入--exec babel-node
两种环境都需要加入

"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 ."
},

如果项目中没有安装babel-cli，babel-preset-env则需要先安装
- 这里也可以安装babel-preset-es2015则也需要相应的修改.babelrc
```
yarn add babel-cli babel-preset-env
//或者使用npm
npm install babel-cli babel-preset-env
```
在项目的根目录下面创建.babelrc文件并加入
```
{
    "presets": ["env"]
}
```
其他的babel配置可自行在官网查看