Nuxt.jsのバージョンをアップグレード/ダウングレードする

  • 公開日アイコン
  • 更新日アイコン
Nuxt.jsのバージョンをアップグレード/ダウングレードする メイン画像

Ad Area

ブラックフライデーセール. 最大 90%OFF

Nuxt.js(2.12系)をアップグレードする方法について。現在の最新版は2.14系なので、そのバージョンにアップグレードする。

アップグレード(2.12.x→2.14.x)

package.jsonのnuxtパッケージのバージョンを上げる

^2.14.0と記述すると、2.14以上で最新のバージョンがインストールされることになる。

package.json
"dependencies": {
    "nuxt": "^2.14.0",
    …(略)
  },

ファイルおよびディレクトリの削除

npmはpackage-lock.json、yarnはyarn.lockファイルを削除する。

さらに、node_modulesディレクトリを削除する。

パッケージのインストール

rootディレクトリでコマンドを実行する。

npm install
// or
yarn install

各パッケージのアップグレード

npm outdated
// or
yarn outdated

で最新のバージョンが確認できるので、それそれアップグレードする。

nuxt.config.jsの編集

v2.13+の新機能を有効にするための記述

nuxt.config.js
components: true

これによってcomponents配下のファイルが自動で読み込まれるようになったので、.vueファイルへの以下の記述は不要になる。

.vue
<script>
import Aaa from '~/components/Aaa'

export default {
  components: { Aaa },
}
</script>

publicRuntimeConfig, privateRuntimeConfigの追加

dotenvモジュールがなくても.envファイルがデフォルトで読み込まれるようになったので、状況に合わせて設定を追加する。

  • publicRuntimeConfig…公開できる環境関数(サイト名、サイトURLなど)
  • privateRuntimeConfig…公開できない環境関数(APIキーなど)
.env
BASE_NAME = サイト名
BASE_URL = http://hogehoge.com
nuxt.config.js
export default {
    publicRuntimeConfig: {
        baseName: process.env.BASE_NAME,
        baseUrl: process.env.BASE_URL
    }
    privateRuntimeConfig:{
      api: process.env.API_KEY
    }
}

ダウングレード(2.14.x→2.13.x)

アップグレード後にトラブルが起きた時のためにダウングレードも考えておきたい。おおむねアップグレードの時の逆作業を行うことになる。

nuxtパッケージのバージョンを下げる

package.json
"dependencies": {
    "nuxt": "<2.14.0",
    …(略)
  },

<2.14.0で2.13.xの最新バージョンがインストールされる。

ファイルおよびディレクトリの削除

package-lock.json(npm)、yarn.lock(yarn)ファイルの削除とnode_modulesディレクトリの削除を行う。

パッケージの再インストール

rootディレクトリでコマンドを実行する。

npm install
// or
yarn install

package.jsonにコマンドを記述

変更前

package.json
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

変更後

package.json
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

2.13.xで非推奨のgenerateコマンドを削除し、必要なexportserveコマンドを追加する。

実際に2.12.2→2.14.12にアップグレードしてみた

手順通りにインストールを行う。

最新バージョンは2.14.12(2021年1月19日現在)

アップグレード完了の証が表示された。ロゴのアスキーアート(?)がおにぎりみたいでかわいい。

オープンソースプロジェクトのNuxt.js開発維持のための寄付
Nuxt.js に貢献する - Open Collective

2.14.xで不要になった以下の設定を削除。

nuxt.config.js
// ↓削除
  dotenv
  require('dotenv').config();

// ↓modeオプション非推奨のため削除
  mode: 'universal',

build: {
    /*
    ** You can extend webpack config here
    */
    // ↓削除
    extend (config, ctx) {
    },
  },

npm run devでサイト起ち上げ。

Nuxt.js開発環境起ち上げ

無事に起動した。「Nuxt.js開発のための匿名データ収集に協力するか?」みたいな質問が出てきて、Yesでも問題ないと思うがとりあえずNoにしておいた。

参考ページ

Ad Area