介面中能宣告變數嗎
Nuxt
場景
之前頁面都是php鋪設的，入職（遠端兼職）後需要重構為前後端分離模式，由於再之前的前端有做過一點點分離，使用了Vue，故而繼續使用Vue重構。之前的Vue只是在原有的php內部進行改造，並非獨立出來。當下的需求是完全獨立出來，主業務獨立出來的頁面由nginx代理兩個埠，抽離的專案完全脫離原有php專案。
由於有較強的SEO需求，故而最終選用了Nuxt框架實現SSR，從而做到SEO友好。
問題
開發過程中遇到這麼個噁心的問題，三種環境的host設定問題：本地、測試、線上。
因為要SEO友好，所以絕大多數頁面都需要使用Nuxt的asyncData請求來實現title的動態，保證爬蟲的爬取。
async asyncData（ctx） {
let res = await http。post（`/a/b/c`， { arg1： xxx }）
return {
data： res。data
}
}
而asyncData有個坑，就是不走開發中設定的axios代理（先於頁面渲染），預設訪問127。0。0。1：80為host與port（貌似不能改，改也沒用），簡直不能再坑。
80埠
這個問題會導致兩種情況：
直接訪問api的path設定根路徑，即/a/b/c，那麼預設走127。0。0。1：80，在重新整理頁面的時候，抱歉，掛掉。
設定固定host，即host/a/b/c，重新整理頁面不掛，不過恭喜你，直接切換頁面喜提跨域。
跨域
主要處理的是問題二。
有人會說，我把跨域驗證開啟不就行了？沒錯，但是這個不是核心問題，核心問題是：你這個host在本地、測試、以及線上怎麼區分！
方案
配置一個變數，手動切換，本地一種，測試一種，線上一種。
利用async的context上下文引數isDev處理。
環境變數處理。
先說方案一：
手動修改
這個方案沒任何毛病，也可以切實的解決問題。但是坑也很大，準確的說是麻煩很大。
如果我們前端每次都在釋出的時候進行修改，那麼可以解決本地到測試這個過程，但是測試到線上這個過程，我們前端涉及就相對不合適了，而且忒麻煩。
變通方案就是寫指令碼，然後測試到線上時候自動改變變數，然後打包，再改回去，避免持續整合出問題。
可以是可以，但是不優雅。
再說方案二：
方案二屬於看似可以解決，實際屁用沒有。
isDev只能區分打包是測試打包還是釋出打包，遺憾的是，測試環境跟線上環境，應該都是釋出打包，所以還是沒法自動區分，最終還是會彙總回方案一。所以說，屁用沒有。
完美方案，方案三：
這個方案就是利用webpack能力了，當然，結合Nuxt提供的介面會更加優雅。邏輯如下：
package。json內部的scripts捕獲npm run的命令攜帶的環境變數，並提供給Nuxt。
Nuxt的配置檔案，nuxt。config。js獲取環境變數，並儲存在process。env中。
axios的create方法注入baseURL，使得每個請求都自動攜帶baseURL。
axios改造為外掛，並在通用http外掛中引用。
http所有請求直接使用根路徑模式，即/a/b/c即可。
步驟配圖如下：
配置build
區分build與build_release，測試與線上指令碼走的時候處理下。
nuxt。config。js
nuxt。config。js內部捕獲。
axios的create方法
這裡設定axios的bashURL。
http請求框架中引用axios外掛
http請求框架中引用axios外掛，注意不是axios，是外掛化的axios。
async asyncData（ctx） {
let res = await http。post（`/a/b/c`， { arg： xxx }）
return {
data： res。data
}
}，
使用根路徑請求即可。
釋出後嘗試正常點選，並重新整理頁面試試看，妥了。