AWSにデプロイしたRailsとVueで作成したポートフォリオにおいて画像が表示されないエラーが発生し、解決したのでその方法です。 修正前のディレクトリツリー original_app | |--app | | | |--assets | | | |--images | | | |--img1.svg | |--src | |--pages | |--Home.vue #このコンポーネントでimg1.svgを読み込みたい Home.vue <template> <img src="/assets/img1.svg"> </template> 開発環境だとing1.svgを読み込めたが本番環境だとうまくいかなかった。 原因 通常のrailsアプリであればviewファイルに/assets/画像ファイルと書けばassets以下のimagesフォルダからファイルを探してきてくれるがVueのファイルはjavascriptなのでそのような動作をしてくれなくなる。 修正後のディレクトリツリー original_app | |--app | |--src | |--assets #追加 | | | |--img1.svg | | |--pages | |--Home.vue #このコンポーネントでimg1.svgを読み込みたい Home.vue <template> <img src="../assets/img1.svg"> </template> 画像ファイルをvueファイルをまとめているフォルダ内に収納してし、直接参照できるようにしてしまう。

久々の投稿です、 現在は、派遣でエンジニアしてます。 来年の2月からフリーランスになります！！ 次の現場では、vueを使うので勉強していて 問題にぶつかりました。 npm run build時に下記のエラーが出ました。 kushiyama_makoto@MakotonoMacBook-Air udemy-vuejs % npm run build > udemy-vuejs@0.1.0 build > vue-cli-service build ⠹ Building for production...Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:221:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:236:3 at runSyncOrAsync (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:130:11) at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:232:2) at Array.<anonymous> (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:205:4) at Storage.finished (/Users/kushiyama_makoto/udemy-vuejs/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9 /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:114 throw e; ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:186:6 at context.callback (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/cache-loader/dist/index.js:240:7 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/neo-async/async.js:2830:7 at done (/Users/kushiyama_makoto/udemy-vuejs/node_modules/neo-async/async.js:2865:11) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/neo-async/async.js:2818:7 at Array.<anonymous> (/Users/kushiyama_makoto/udemy-vuejs/node_modules/cache-loader/dist/index.js:229:9) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v17.3.0 正直わからん状態でしたが、ググった結果下記のコマンドで解決しました。 export NODE_OPTIONS=--openssl-legacy-provider nodeの設定を追加したみたいですね。 一応、下記のURLを参考にしました。 https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported 確認してみてください！！！

概要 Vuetifyでドロップダウンのメニューを実装する場合に、v-menuを使うことがあると思います。Vuetify2だと、Vuetify.js 2.2のMenu, Tooltipコンポーネントについての記事で、紹介されているような実装で実現できるのですが、Vuetify3だとVuetify2と同じ実装では動作しません。ということで、Vuetify3でv-menuをどう実装すれば良いのかというのをメモ書きします。 なお、この記事を書いた2021年12月時点でVuetify3はアルファ版ですので、今後仕様が変わる可能性があることご留意ください。 対応方法 こちらのドキュメントに、Vuetify3のv-menuの実装が記載されています。Vuetify2との違いは、templateの実装で<template v-slot:activator="{ props }">となっていてv-slot:activatorにpropsが設定されています。そして、このpropsはメニューを開くドロップダウンのボタンで、<v-btn color="primary" dark v-bind="props">のようにbindします。 実装サンプル メニューの表示部分を実装サンプルとしてのせます。クリックした時のアクションの実装は、特にVuetify特有のものでは無いので割愛します。 <template> <v-spacer /> <v-menu> <template v-slot:activator="{ props }"> <v-btn icon v-bind="props" color="blue-lighten-5"> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </template> <v-list style="position: absolute; left: -100px; z-index: 999" color="white" > <v-list-item> <v-list-item-title> <div @click="transferTop" role="button">トップ</div> </v-list-item-title> </v-list-item> <v-list-item> <v-list-item-title> 　　　<div @click="transferCategory" role="button"> 　　　カテゴリー管理 　 </div> 　 </v-list-item-title> </v-list-item> <v-list-item> 　　<v-list-item-title> 　　　　<div @click="logout" role="button"> 　　ログアウト </div> 　　　　　　　　　　　　　　</v-list-item-title> 　　</v-list-item> </v-list> </v-menu> </template> メニューは、以下のようなイメージで表示されます。