Rails アプリケーションの Vue2 を Vue3.1 にアップグレードする際の webpack の設定

vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub
の 3 に当たる設定内容です。

この記事は、 webpacker v5 系を使用している前提での内容になります。
また、記事作成時点では、 Vue 3.1.0 の beta を使用しています。

Versions

• rails: 6.1.3.2
• webpacker: 5.4.0
• vue: 3.1.0-beta.7
• @vue/compat: 3.1.0-beta.1
• vue-loader: 16.2.0

前準備

vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub にある通り、 vue-loader の ^16.0.0 へのアップデートと、 vue , @vue/compat の 3.1 系へのアップデートを行います。

下記のように package.json を修正し、 yarn install または npm install を実行します。

package.json

  "dependencies": {
    "vue": "^3.1.0-0",
    "@vue/compat": "^3.1.0-0",
    "vue-loader": "^16.0.0",
    ...
  },

webpack の設定修正

config/webpack/loaders/vue.js 、 config/webpack/environment.js を下記の通り修正します( config/webpack/loaders/vue.js が未作成の場合は新規で作成します)。

config/webpack/loaders/vue.js

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: {
      compilerOptions: {
        compatConfig: {
          MODE: 2,
        },
      },
    },
  }],
};

config/webpack/environment.js

const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');

environment.config.merge({
  resolve: {
    alias: {
      vue: '@vue/compat',
    },
  },
});

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
module.exports = environment;

サンプルコミット: Update vue to 3 1 by t0yohei · Pull Request #70 · t0yohei/rails-vue-app · GitHub

動作の確認

設定がうまくいっていた場合、 bin/webpack や bin/webpacker-dev-server を実行した際に、添付画像のような warning や error が出てくるようになります。

今後の対応

webpack の設定変更後は、ビルドで出てくる warning, error をひたすら潰していく作業になります。

以降の作業については、下記の 4 以降を参考にしてください。
vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub

無事に全ての作業が完了すると、Vue3.1への移行が完了になります。