nuxt generate靜態化后回退問題


之前線上的項目是nuxt build后的項目發布在服務器上,pm2來管理node的進程,nuxt還是運行在node的環境里。

這個方案用了半年左右,訪問速度什么的確實很快,pm2管理下的node在windows服務器上運行也很完美

唯一不足的地方是,個人感覺還是很麻煩,還是想拷貝文件就能解決問題的最好了,所以,用了generate

具體使用教程請移步官方教程:https://zh.nuxtjs.org/api/configuration-generate

generate用完后其實遇到的問題還是不少的,這里僅僅只聊聊回退問題

問題描述如下:

1.pages下我創建了兩個測試頁

 

2.Index.vue頁代碼如下

<template>
  <div>
    <div>sdfsdf</div>
    <input type="text"
           v-model="input" />
    <div class=""
         @click="click"
         _log="test">測試router</div>
    <div class=""
         @click="click2">測試href</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'testpage',
  data() {
    return {
      value: ''
    }
  },
  computed: {
    input: {
      get() {
        return this.$store.getters.input
      },
      set(value) {this.$store.dispatch('setTestValue', value)
      }
    }
  },
  methods: {
    click() {
      this.$router.push('/test/value')
    },
    click2() {
      window.location.href = '/test/value'
    }
  },
  mounted() {
    this.value = this.input
    let url = window.location.href
  }
}
</script>

Index有兩個按鈕,兩個按鈕分別以vue-router的push跳轉和location.href的方式跳轉,

用這兩種跳轉的原因是我以為是vue-router的跳轉的問題,用了兩個進行對比一下,方便查找原因

3.Value.vue代碼如下

<template>
  <div>
    <div>跳轉了</div>
  </div>
</template>
<script>
export default {
  mounted() {
    // this._status = 200
  }
}
</script>

4.這個回退問題在安卓機器和電腦上測試都沒什么問題,在蘋果機器上safari瀏覽器就有問題了

跳轉成功后,回退時就403了,我看了一下回退后的地址,回到了根目錄

問題現象大致就是上面這樣,雖然可以用其他辦法規避回退,但是這個問題還是會造成不小的麻煩

嘗試過了不少方法,暫時還想不通這里面的原因,所以就簡單粗暴的替換了history地址

window.history.replaceState('', document.title, window.location.href)

這個問題雖然解決了,不知道是不是nuxt的一個bug,但是官方例子我從git下載下來了后,並沒有發現這個問題。

如果你也碰到此類回退的問題,基本都可以用這個辦法得到解決。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM