1. 程式人生 > >Nuxt.js專案不識別import問題原因及解決方法

Nuxt.js專案不識別import問題原因及解決方法

1、問題

使用npx create-nuxt-app建立Nuxt.js專案,專案預設使用require引入依賴,如下:
在這裡插入圖片描述
平時習慣使用import,改為import Koa from 'koa'會報SyntaxError: Unexpected identifier,即不識別import錯誤。

2、原因

通過package.json可以看到,使用npx create-nuxt-app創建出來的Nuxt.js專案在npm run dev時直接使用node編譯index.js,我們之前寫的專案之所以可以,是因為有用babel去處理,也就是說,node本身是不支援這種語法的。
在這裡插入圖片描述

3、解決方法

前提:已安裝babel-cli,還沒安裝可通過npm install -g babel-cli安裝
①、修改package.json,結合babel處理
在這裡插入圖片描述
②、專案根目錄建立babel配置檔案並配置
在這裡插入圖片描述
③、安裝babel-preset-es2015
在這裡插入圖片描述
④、重新執行專案
在這裡插入圖片描述