為什么使用nuxt.js?
vue單頁(yè)面應(yīng)用渲染是從服務(wù)器獲取所需js体斩，在客戶端將其解析生成html掛載于
id為app的DOM元素上猜欺，這樣會(huì)存在兩大問(wèn)題。
1简十、由于資源請(qǐng)求量大檬某，造成網(wǎng)站首屏加載緩慢撬腾，不利于用戶體驗(yàn)螟蝙。
2、由于頁(yè)面內(nèi)容通過(guò)js插入民傻，對(duì)于內(nèi)容性網(wǎng)站來(lái)說(shuō)胰默，搜索引擎無(wú)法抓取網(wǎng)站內(nèi)容，不利于SEO漓踢。
Nuxt.js 是一個(gè)基于Vue.js的通用應(yīng)用框架牵署，預(yù)設(shè)了利用Vue.js開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置⌒耄可以將html在服務(wù)端渲染奴迅，合成完整的html文件再輸出到瀏覽器。
1挺据、使用 starter 模板
這里項(xiàng)目初始化取具，直接使用官網(wǎng)的Nuxt提供的starter的模板
# 安裝 vue-cli
npm install -g vue-cli
# 初始化項(xiàng)目
vue init nuxt-community/starter-template nuxt-ssr-demo
# 安裝依賴
cd nuxt-ssr-demo
npm install # Or yarn install
# 啟動(dòng)本地服務(wù)
npm run dev
訪問(wèn) http://localhost:3000 脖隶，現(xiàn)在我們來(lái)看下初始化好的項(xiàng)目目錄
├── assets css，圖片等資源都在這
├── components 組件相關(guān)
├── layouts 路由布局
├── middleware 中間件
├── pages 路由頁(yè)面
├── static 靜態(tài)資源
├── pages 路由頁(yè)面
├── store vuex 相關(guān)
├── nuxt.config.js nuxt 相關(guān)配置
├── package.json 依賴相關(guān)
├── README.md 項(xiàng)目介紹
注釋：為什么沒(méi)有 router 路由相關(guān)的文件暇检？莫慌产阱，Nuxt 會(huì)幫你將 pages 下面的文件自動(dòng)解析成路由。所以在接下來(lái)的開(kāi)發(fā)中块仆，記得別瞎在 pages 下面新增文件构蹬，pages 下面的每一個(gè) vue 文件就是一個(gè)路由。
2悔据、封裝axios
首先在根目錄下面新建 service 目錄庄敛，在其下面建立 config.js 和 index.js 兩個(gè)文件，下面的代碼僅供參考科汗，如果你的項(xiàng)目還需要做額外的一些配置铐姚，可自行進(jìn)行拓展
config.js
import http from 'http'
import https from 'https'
export default {
// 自定義的請(qǐng)求頭
headers: {
post: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
'X-Requested-With': 'XMLHttpRequest'
},
// 超時(shí)設(shè)置
timeout: 10000,
// 跨域是否帶Token
withCredentials: true,
// 響應(yīng)的數(shù)據(jù)格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
// 用于node.js
httpAgent: new http.Agent({
keepAlive: true
}),
httpsAgent: new https.Agent({
keepAlive: true
})
}
index.js
import axios from 'axios'
import qs from 'qs'
import config from './config'
const service = axios.create(config)
// POST 傳參序列化
service.interceptors.request.use(
config => {
if (config.method === 'post') config.data = qs.stringify(config.data)
return config
},
error => {
return Promise.reject(error)
}
)
// 返回結(jié)果處理
service.interceptors.response.use(
res => {
return res.data
},
error => {
return Promise.reject(error)
}
)
export default {
// post 方法
post (url, data) {
console.log('post request url', url)
return service({
method: 'post',
url,
params: data
})
},
// get 方法
get (url, data) {
console.log('get request url', url)
return service({
method: 'get',
url,
params: data
})
},
// delete 方法
delete (url, data) {
console.log('delete request url', url)
return service({
methods: 'delete',
url,
params: data
})
}
}
跨域的處理：
vue中可以處理跨域 webpack中的proxyTable，但是在Nuxt中沒(méi)有proxyTable這個(gè)東西肛捍，但是可以用直接通過(guò)配置 http-proxy-middleware 來(lái)處理跨域隐绵。更幸運(yùn)的是 Nuxt 官方提供了兩個(gè)包來(lái)處理 axios 跨域問(wèn)題。
- @nuxtjs/axios
-
@nuxtjs/proxy
安裝下依賴
npm i @nuxtjs/axios @nuxtjs/proxy -D
然后在 nuxt.config.js 文件里進(jìn)行配置
modules: [
'@nuxtjs/axios'
],
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'xxx.target.com',
pathRewrite: { '^/api': '' }
}
}
需要注意的拙毫，因?yàn)槭欠?wù)器端渲染依许，我的是判斷是路由跳轉(zhuǎn)還是axios請(qǐng)求，所以：
// 判斷是路由跳轉(zhuǎn)還是 axios 請(qǐng)求
if (process.server) {
config.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
}
未完待續(xù).....
