Nuxt.js 服務端渲染 axios(@nuxtjs/axios) 和 proxy 代理的配置

一、介紹

• Nuxt.js（Vue SSR）建立項目到伺服器（Nginx+PM2）部署詳細流程

• nuxt.js

  在建立項目的時候可以選擇安裝

  axios

  。

• axios

  與

  @nuxtjs/axios

  可以共用

  nuxt.config.js

  中代理配置。
• 使用的時候需要注意

  asyncData()

  中需要請求全連結或者伺服器有配代理的接口，也就是在伺服器渲染的時候需要拿到組裝的資料，等到了浏覽器本地之後，需要走代理請求，否則會出現跨域，支援加載更多跟其他接口請求操作，更換資料也是沒問題的，但是到浏覽器之後必須走代理請求，在伺服器渲染的時候必須走全連結請求或者走伺服器配置了代理的請求，沒配置代理就走全連結請求，在伺服器不存在跨域，下面

  axios

  使用中有例子。

二、使用

@nuxtjs/axios

• 在建立項目的時候，就可以選擇導入

  @nuxtjs/axios

  ，它是對

  axios

  包裝，更好在

  nuxt.js

  中使用，可以通過

  this.$axios.get(url).then()

  進行全局使用。
• 檢查

  package.json

  檔案中

  dependencies

  有沒有存在

  @nuxtjs/axios

  ，沒有指令行安裝(建議建立項目的時候就通過腳手架安裝上)

  $ npm install --save @nuxtjs/axios
             

  

• nuxt.config.js

  配置，代理配置

  export default {
    head: { ... },
    css: [],
  
    modules: [
      '@nuxtjs/axios',
    ],
  
    axios: {
      // 開啟代理 (如果需要判斷線上線下環境，可以通過 process.env.NODE_ENV !== 'production' 來判斷)
      proxy: true,
      // 給請求 url 加個字首 /api，如果這項不配置，則需要手動添加到請求連結前面
      // 如果是多個代理的時候，則不需要配置，走手動添加代理字首
      prefix: '/api',
      // 跨域請求時是否需要使用憑證
      credentials: true
    },
  
    proxy: {
      '/api': {
        // 目标接口域
        target: 'http://test.dzm.com',
        // 全局配置是否跨域
        changeOrigin: true,
        pathRewrite: {
          // 單個配置是否跨域
          // changeOrigin: true
          // 把 '/api' 替換成 '/'，具體需要替換為 '' 還是 '/' 看自己習慣
          '^/api': '/'
        }
      }
    },
  
    build: {
      // 防止重複打包
      vendor: ['axios']
    }
  }
             

• 在元件中使用，這樣就可以在伺服器渲染到頁面之後，通過請求進行更換資料，因為到頁面之後需要走代理的方式才能擷取到資料，否則會報錯跨域。

  mounted() {
      this.$axios.get("/index").then(res=>{
          console.log(res)
      })
      
      // axios 需要手動加上 '/api' 代理協定
      // @nuxtjs/axios 因為配置了 prefix: '/api' 會自動添加，否則也得手動添加
      // 通路的 url 位址為  http://x.x.x.x:3000/api/index
      // 然後根據上面代理轉為 http://test.dzm.com/index
      // /api 會自動加到通路連結中
  }
             

二、使用

axios

• 安裝指令，預設一般

  nuxt.js

  自帶

  axios

  ，是不需要手動安裝的，在

  package.json

  檔案中

  dependencies

  中可能并不展現出來，可以通過

  node_modules

  檔案夾找到

  axios

  。

  $ npm install --save axios
             

  

• 如果找到了，就不要去安裝了，直接使用即可，代理是公用的。

  <script>
  import axios from 'axios'
  export default {
      mounted() {
          axios.get("/api/index").then(res=>{
              console.log(res)
          })
  
          // axios 需要手動加上 '/api' 代理協定
          // @nuxtjs/axios 因為配置了 prefix: '/api' 會自動添加，否則也得手動添加
          // 通路的 url 位址為  http://x.x.x.x:3000/api/index
          // 然後根據上面代理轉為 http://test.dzm.com/index
          // /api 會自動加到通路連結中
      }
  }
  </script>
             

• axios

  可以進行封裝使用，跟

  vue

  中一樣

  • axios.js

    import axios from 'axios'
    
    const service = axios.create({
      // 請求位址，為空則請求的時候帶上
      baseURL: '',
      // 請求逾時時間
      timeout: 90000
    })
    
    export {
      service as axios
    }
               

  • request.js

    import { axios } from './axios'
    // 請求位址
    const BASE_URL = process.env.NODE_ENV === 'production' ? 'http://dzm.com' : 'http://test.dzm.com'
    
    // 這種帶全連結用于放在 asyncData() 中進行 SEO 請求
    export function getxxx (parameter) {
      return axios({
        url: BASE_URL + `/list`,
        method: 'get',
        params: parameter
      })
    }
    
    // 這種帶全連結用于放在 asyncData() 中進行 SEO 請求
    export function postxxx (parameter) {
      return axios({
        url: BASE_URL + `/reload`,
        method: 'post',
        data: parameter
      })
    }
    
    // 這種帶全連結用于放在頁面加載到浏覽器之後，加載更多或者其他請求操作使用，不會出現跨域問題
    export function getxxx (parameter) {
      return axios({
        url: '/api' + `/list`,
        method: 'get',
        params: parameter
      })
    }
    
    // 這種帶全連結用于放在頁面加載到浏覽器之後，加載更多或者其他請求操作使用，不會出現跨域問題
    export function postxxx (parameter) {
      return axios({
        url: '/api' + `/reload`,
        method: 'post',
        data: parameter
      })
    }