nuxt修改ico和pwa的配置使用

修改ico

1. 在static中添加自己需要的图标,如favicon2.ico
2. nuxt.config.js中修改

head:{
	link: [
	{ rel: "icon", type: "image/x-icon", href: "/favicon2.ico" },
      { rel: "shortcut icon", href: "/favicon2.ico" },
      { rel: "apple-touch-icon", href: "/favicon2.ico" }
		]
}

---

配置pwa

1. 安装@nuxtjs/pwa
2. pwa默认所需图标是static/icon.png, 若修改了文件位置或命名,如static/icon2.png,则需要配置icon

  modules: ["@nuxtjs/pwa"],
  pwa: {
    icon: {
      source: "/icon2.png",  //路径为static中的icon2.png
      fileName: 'icon2.png'
    },
    
    manifest: {
      name: "我是名字",
      short_name: "我是名字",
      lang: "zh-CN",
      theme_color: "#fff", 
      description:
        "我是描述"
    },
    // workbox: {        //开发环境取消注释,调试pwa, 打包时注释
    //   dev: true 
    // }
  },

注意点:pwa只能在localhost和127.0.0.x或https安全域名下使用

---

手动触发保存pwa到桌面

示例: download.vue, 保存到桌面的按钮组件

<template>
  <div v-if="prompt" @click="download">
    保存至桌面
  </div>
</template>

<script>
export default {
  data() {
   return {
  	 prompt: null
   }
  },
  mounted() {
    window.addEventListener("beforeinstallprompt", this.beforeinstallprompt);
  },

  methods: {
    beforeinstallprompt(e) {
      this.prompt = e
      e.preventDefault();
      return false;
    },
    download() {
      if (this.prompt) {
        // 异步触发横幅显示，弹出选择框，代替浏览器默认动作
        this.prompt.prompt();
        // 接收选择结果
        this.prompt.userChoice
          .then((result) => {
		   // {outcome: "dismissed", platform: ""} // 取消添加
		   // {outcome: "accepted", platform: "web"} // 完成添加
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>