vueファイルの置き場所を設定

app/javascript/srcの位置を@で示せるようにする

config/webpack/custom.js

const utils = require('./utils')

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': utils.resolve('../app/javascript/src')
    }
  }
}

vueはデフォルトでランタイム限定ビルド(されたVue.js)を読み込みます完全ビルド(されたVue.js)を読み込むように変更するには上の修正が必要です。

aloerina01.github.io

itexplorer.hateblo.jp

config/webpack/utils.js

var path = require('path')

exports.resolve = function (dir) {
  return path.join(__dirname, '..', dir)
}

config/webpack/development.js

const environment = require('./environment')
const customConfig = require('./custom')
const utils = require('./utils')

const config = {
  devtool: '#cheap-module-eval-source-map'
}

const merged = merge(customConfig, config)
module.exports = merge(environment.toWebpackConfig(), merged)

エラーになるのでpackage.jsonに追加してyarn install

+++ b/package.json
@@ -4,9 +4,11 @@
     "coffeescript": "1.12.7",
     "vue": "^2.5.13",
     "vue-loader": "^13.7.0",
+    "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13"
   },
   "devDependencies": {
-    "webpack-dev-server": "^2.11.0"
+    "webpack-dev-server": "^2.11.0",
+    "webpack-merge": "^4.1.0"
   }
 }

rails側エラーにならないように

+++ b/config/environments/development.rb
@@ -1,6 +1,6 @@
 Rails.application.configure do
     # Verifies that versions and hashed value of the package contents in the project's package.json
-  config.webpacker.check_yarn_integrity = true
+  # config.webpacker.check_yarn_integrity = true

諸行無常

IT色々お勉強中のブログ

vueファイルの置き場所を設定