与您分享电脑世界

<template >
<div v-if="show">
    <div class="flex">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        <span>倒计时：{{ `${d || 0}天${h || 0}小时${m || 0}分${s || 0}秒` }}</span>
    </div>
</div>
</template>
<script>
export default {
  props: {
      endTime: {
          type: String,
          default: ''
      },
  },
  data() {
      return {
          d: '',
          h: '',
          m: '',
          s: '',
          timer: null,
          show:false
      }
  },
  mounted() {
      clearTimeout(this.timer);
      this.countTime();
  },
  beforeDestroy() {
      clearTimeout(this.timer);
  },
  methods: {
      countTime: function () {
          //获取当前时间
          let date = new Date()
          let now = date.getTime()

          //设置截止时间
          let endDate = new Date(this.endTime);
          let end = endDate.getTime()

          //时间差
          let leftTime = end - now;

          //定义变量 d,h,m,s保存倒计时的时间
          if (leftTime >= 0) {
              this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)//天数我没用到，暂且写上
              this.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
              this.m = Math.floor((leftTime / 1000 / 60) % 60)
              this.s = Math.floor((leftTime / 1000) % 60)
              //递归每秒调用countTime方法，显示动态时间效果
              this.timer = setTimeout(this.countTime, 1000)
              this.show=true
          }
      },
  },
}

</script>

以上内容存保存到到项目下的组件目录components/DateDown.vue

在需要的地方调用即可

最近有个nuxt3项目需要部署，顺利的话其实也简单，这里简单说说：

首先编译yarn bulid，生成.output和.nuxt
使用pm2 start跑起项目，默认会去调用命令目录下的ecosystem.config.js，里面有启动的配置参数，nginx配置只要以下简单内容可以了，先用ip直接访问试试看后再用代理方式。

server {
  listen 80;
  server_name dev.netpc.com.cn;
  access_log off;
  location / {  
   proxy_pass http://localhost:3001;
   index index.html index.htm;
  }
}

这里遇到问题

1、修改了.ts文件发现yarn bulid重新生产一直有缓存
执行yarn nuxi cleanup清空缓存再编译
2、nginx配置不要除了反向代理的location /还有别的
例如处理jpg png 或js的，

   location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }

上面内容会导致反向代理后出现404