Vue CLI 3.0 の時代。2は消せ。
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
yarnとyarn 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'
}
.gitignoreにnsw.*追記。-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
- ホーム画面に追加
