既存のrailsプロジェクトにwebpackerを利用してvue.jsを導入する方法について教えてください

ご質問させていただきます。

現在、開発環境はCloud9で、railsにwebpackerを使ってvueを導入しようとしているのですが、
webpackerを使ってvueをインストールしようとするとエラーが出てしまいます。

以下エラー内容です。

ubuntu:~/environment/with-exo (creating-toppages) $ rails webpacker:install:vue
rails aborted!
Don't know how to build task 'webpacker:install:vue' (See the list of available tasks with `rails --tasks`)
Did you mean?  webpacker:install
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-5.2.6/lib/rails/commands/rake/rake_command.rb:23:in `block in perform'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-5.2.6/lib/rails/commands/rake/rake_command.rb:20:in `perform'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-5.2.6/lib/rails/command.rb:48:in `invoke'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/railties-5.2.6/lib/rails/commands.rb:18:in `<main>'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.5/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.5/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `block in require_with_bootsnap_lfi'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.5/lib/bootsnap/load_path_cache/loaded_features_index.rb:92:in `register'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.5/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:22:in `require_with_bootsnap_lfi'
/home/ubuntu/.rvm/gems/ruby-2.6.3/gems/bootsnap-1.7.5/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:31:in `require'
bin/rails:4:in `<main>'
(See full trace by running task with --trace)

考えられる原因としては、railsでプロジェクトを作成する際に、rails new myapp --webpack=vue オプションを付加していないため、vueに関してのwebpackの設定がされておらず、エラーがでてしまっていると考えています。

解決方法が分からないため、ご教示いただけたら幸いです。

自分のしたこと
・npmのインストール　ver 6.14.13
・node.jsのインストール　ver 14.17.0
・yarnのインストール　ver 1.22.10
・webpackerのインストール
・webpackerを使ってvueをインストール　←ここでエラー

参考サイト：https://www.techpit.jp/courses/123/curriculums/126/sections/934/parts/3576

FKM

2021/05/31 00:45

普通にrails webpacker:installはうまくいってるのでしょうか？

yusei01

2021/06/01 08:35

ご回答ありがとうございます。 rails webpacker:install を実行したところ、以下のようにインストールはされます。 You need to allow webpack-dev-server host as allowed origin for connect-src. This can be done in Rails 5.2+ for development environment in the CSP initializer config/initializers/content_security_policy.rb with a snippet like this: policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development? Webpacker successfully installed ???? ???? ただし、rails5.2より上の場合は以下のコードを「content_security_policy.rb」ファイルに記入するようにという警告があるようにみえます。 policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development? 記入したところ、エラーがでてしまい解決できませんでした。解決方法が検討つかないため、ご教示願います。