Deveroper メモ

記事内容に絶対の保証はなく..どちらかというと自分用のノウハウ蓄積ページ。 それでも良ければ見ていってください。

require('vue') する時の注意点

目的

  • Vue.js を require して使う時のメモ書き(エラーになる時 ならない時)
  • webpack を使う時

エラーになるパターン

// src/main.js
const Vue = require('vue')

//...
// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist')
  }
}

エラーにならないパターン

// src/main.js
const Vue = require('vue')

//...
// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/main.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './dist')
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.common.js'
    }
  }
}

resolve 以降がミソ

参考元

vuejs.org

詳しくはここに書いてある。

  • Runtime + Compiler vs. Runtime-only の箇所