フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

nuxtjs vuetifyとdotenvにインストールする(Windows/Docker構成)

 vuetify インストール

下記のコマンドでインストール

yarn add @nuxtjs/vuetify --no-bin-links

nuxt.config.jsに下記の記述を追記する

$ vi nuxt.config.js

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/vuetify'
],

 

dotenvインストール

下記のコマンドでインストール

yarn add --dev @nuxtjs/dotenv --no-bin-links

 

nuxt.config.jsに下記の記述を追記する

 $ vi nuxt.config.js

   buildModules: [   

  // Doc: https://github.com/nuxt-community/eslint-module   

  '@nuxtjs/eslint-module',   

  ['@nuxtjs/dotenv', { filename: '.env.prod' }] 

 ],

.envファイルに設定したい値を記述する

vi .env

API_KEY=ba25d3ae6eba40c49eb150c45ebcd665

 この状態で起動すると下記のエラーが発生する

This dependency was not found:

  • fs in ./node_modules/@nuxtjs/dotenv/dist/index.js

To install it, you can run: npm install --save fs

 下記のgithubのissueをもとにnuxt.config.jsを修正する

https://github.com/nuxt-community/dotenv-module/issues/11

 

build: {
 /*
 ** You can extend webpack config here
 */
 extend (config, ctx) {
 },
 extend (config, { isDev, isClient }) {
  config.node = {
   fs: 'empty'
  }
 }
},

 そしてvueファイルの記述に


<template>
 <v-app>
  <v-alert type="success">
   {{ key }}
  </v-alert>
 </v-app>
</template>
<script>
require('dotenv').config()

export default {

 props: {
 },
 data: () => ({
  key: process.env.API_KEY
 })
}
</script>

 

 

画面にenvファイルに指定したAPI Keyが表示される

f:id:PX-WING:20191224001115p:plain



自分が検証しているPCはこちらです。