nuxt修改ico和pwa的配置使用

最新推荐文章于 2024-08-27 09:51:20 发布

金刚腿

最新推荐文章于 2024-08-27 09:51:20 发布

阅读量2.5k

点赞数 1

分类专栏： nuxt 文章标签： javascript

本文链接：https://blog.csdn.net/goldenlegs/article/details/111190736

版权

nuxt 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Nuxt.js应用中修改 favicon 和配置 Progressive Web App (PWA)，包括在static目录下添加图标、调整PWA manifest配置，并提到了在本地开发环境下手动触发PWA桌面安装的方法。

摘要由CSDN通过智能技术生成

修改ico

在static中添加自己需要的图标,如favicon2.ico
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

安装@nuxtjs/pwa
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>