万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1

    Vue CLI 3系を使ってNuxt.jsで PWA (Progressive Web Apps)

    Vue CLI 3.0 の時代。2は消せ。

    https://cli.vuejs.org/guide/

    vue --version

    2系なら消す

    yarn global remove vue-cli

    Vue CLI 3.0

    yarn global add @vue/cli
    vue --version
    3.0.5

    vue initするためになんかこれもいるらしい

    yarn global add @vue/cli-init

    nuxt-pwaプロジェクト

    vue init nuxt/starter nuxt-pwa

    cd nuxt-pwaしてyarn

    yarnyarn install同じっぽいw

    yarn devで起動

    yarn run v1.5.1
    warning ../../../package.json: No license field
    $ nuxt
    
    
     INFO  Building project
    
    ✔ success Builder initialized
    ✔ success Nuxt files generated
    
    Compiling
    
    ● client
    
    ● server █████████████████████████ building modules (13%) 31/35 modules 4 active
      babel-loader › vue-loader › .nuxt/components/nuxt-loading.vue
    
    
    
     ERROR  Failed to compile with 1 errors                                                                          7:32:28 PM
    
    
     READY  Listening on http://localhost:3000

    https://github.com/nuxt/nuxt.js/issues/3216#issuecomment-380777572 こいつを見てnuxt.config.jsを修正する

          if (isDev && isClient) {

    process.を追加する。

          if (isDev && process.isClient) {

    むかつくのでプルリク https://github.com/nuxt-community/starter-template/pull/85

    nuxt.config.js これ追記。1つ前の行に,忘れずに

      modules: [
        '@nuxtjs/pwa'
      ],
      manifest: {
        name: "PWA Page",
        lang: 'ja'
      }

    .gitignorensw.*追記。-eは改行コードを使うためのオプション

    echo -e "\n#PWA\nsw.*" >> .gitignore

    最後に512pxx512pxアイコン画像をstatic/icon.pngに配置します。

    PWAするためのやつ入れる

    yarn add @nuxtjs/pwa

    静的ファイルを生成する。

    yarn generate

    serveをインストール

    serve --version
    10.0.2
    yarn global add serve
    serve -s dist/
    • Netlifyにのせる

    https://ja.nuxtjs.org/faq/netlify-deployment/

    • Build command
    npm run generate

    これでもいける。っていうか調べる前に書いたらいけてた

    yarn run generate
    • Publish directory

    dist

    • ホーム画面に追加

    iPhoneSafari開いて「Add To Home Screen」