淺談Vue服務(wù)端渲染框架Nuxt的那些事
Vue因其簡(jiǎn)單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，受到很多前端開(kāi)發(fā)人員的青睞。國(guó)內(nèi)很多公司都在使用vue進(jìn)行項(xiàng)目開(kāi)發(fā)，我們正在使用的簡(jiǎn)書(shū)，便是基于Vue來(lái)構(gòu)建的。
我們知道，SPA前端渲染存在兩大痛點(diǎn)：（1）SEO。搜索引擎爬蟲(chóng)難以抓取客戶端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使網(wǎng)站無(wú)法在搜索引擎中被用戶搜索到。（2）用戶體驗(yàn)。大型webApp打包之后的js會(huì)很龐大，于是就有了按模塊加載，像require.js一樣，異步請(qǐng)求。webpack盛行，就變成了代碼分割。即便如此，受制于用戶設(shè)備，頁(yè)面初次渲染還是有可能很慢，白屏等待時(shí)間太長(zhǎng)，對(duì)日益挑剔的用戶群體來(lái)說(shuō)，無(wú)法接受。
因此，對(duì)于那些展示宣傳型頁(yè)面，如官網(wǎng)，必須進(jìn)行服務(wù)端渲染（SSR）。
Vue官方SSR文檔的配置太過(guò)繁瑣，需要對(duì)node和webpack有相當(dāng)不錯(cuò)的使用經(jīng)驗(yàn)，對(duì)于一個(gè)前端小白而言，官方推薦NUXT。
NUXT是一款基于vue的服務(wù)端渲染框架，跟React的NEXT異曲同工。
最近公司在重構(gòu)項(xiàng)目，為了有利于SEO，需要使用到服務(wù)端渲染，在查閱了一番資料后選擇了Nuxt.js，Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架，詳情可以看官網(wǎng)，這里主要記錄下在使用過(guò)程中遇到的問(wèn)題及解決方案。
技術(shù)棧：Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios
項(xiàng)目構(gòu)建
Nuxt.js 官方提供了腳手架「 確保安裝了npx（npx在NPM版本5.2.0默認(rèn)安裝了）」
npx create-nuxt-app <項(xiàng)目名> 按照提示選擇適合自己項(xiàng)目的配置即可
然后 npm run dev。
遇到的問(wèn)題
一、router自定義
發(fā)現(xiàn)現(xiàn)在很多的框架都有一套自己的路由生成規(guī)則（基于vue-router）然后在對(duì)應(yīng)的目錄下創(chuàng)建目錄，即會(huì)自己生成對(duì)應(yīng)的路由，如果對(duì)url的路徑?jīng)]有要求的這樣也是可以的，如果想要自定義路由的話，就需要添加些配置。具體如下：
extendRoutes (routes, resolve) {
routes.push({
name: 'father', /** 自定義路由的name **/
path: '/father', /** 自定義路由的path **/
component: resolve(__dirname, 'pages/father/index.vue'), /** 組件路徑 **/
children: [{ /** 子路由配置 （其它相同） **/
name: 'son',
path: '/son',
component: resolve(__dirname, 'pages/son/index.vue')
},
{
name: 'daughter',
path: '/daughter',
component: resolve(__dirname, 'pages/daughter/index.vue')
}]
})
}
對(duì)應(yīng)的參考官方Nuxt.js自定義路由
自定義請(qǐng)求頭（基于axios請(qǐng)求的base_url修改）
需求描述：公司的有正式環(huán)境和特使環(huán)境對(duì)應(yīng)不同的服務(wù)器，所以需要在請(qǐng)求的時(shí)候添加對(duì)應(yīng)的請(qǐng)求頭，具體配置可以參考如下代碼：
package.json配置：
"scripts": {
"dev": "cross-env NODE_ENV=development PORT=3333 nuxt",
/** 本地環(huán)境：這里給環(huán)境變量NODE_ENV指定了對(duì)應(yīng)的development的值和指定了運(yùn)行端口 **/
"build": "cross-env NODE_ENV=online nuxt build",
/** 打包：指定了環(huán)境變量的值為online **/
"start": "HOST=0.0.0.0 PORT=3333 nuxt start",
/** 打包：指定了環(huán)境變量的值為online 端口為3333 HOST為0.0.0.0 百度了一下，
0.0.0.0代表本機(jī)的所有ip地址,即同網(wǎng)段其他機(jī)器也可以訪問(wèn)的，
默認(rèn)的127.0.0.1由于和本地ip綁定了，所以只有綁定到本機(jī)地址的服務(wù)能被同網(wǎng)段其他機(jī)器訪問(wèn)**/
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
axios.js配置：
/** 自定義請(qǐng)求base_url **/
if (process.env.NODE_ENV === 'test') {
axios.defaults.baseURL = 'http://test'
} else if(process.env.NODE_ENV === 'online') {
axios.defaults.baseURL = 'http://online'
} else {
axios.defaults.baseURL = 'http://127.0.0.1'
}
這里使用的NODE_ENV由于在nuxt.js默認(rèn)就存在，所以不需要定義這個(gè)變量，如果需要聲明一個(gè)不存在的環(huán)境變量，需要在nuxt.config.js里面添加如下配置
/** 下面聲明了一個(gè)PATH_TYPE變量，其余的不需要改變，只需要將對(duì)應(yīng)的NODE_ENV改成PATH_TYPE即可 **/
env: {
PATH_TYPE: process.env.PATH_TYPE
}
一定要看備注：要運(yùn)行上面的示例，你需要運(yùn)行npm install --save-dev cross-env 安裝 cross-env。如果你在非Windows環(huán)境下開(kāi)發(fā)，你可以不用安裝cross-env，這時(shí)需要把 start 腳本中的cross-env去掉。
官方文檔：1.主機(jī)和端口配置 2.dev屬性修改
打包webpack配置
nuxt.js框架默認(rèn)使用過(guò)了一套配置，但是看了編譯出來(lái)的源碼后發(fā)現(xiàn)css文件全部在源碼里，感覺(jué)不是很利于收縮引擎的SEO，所以自定義了打包配置，代碼如下：
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'chunk-styles',
test: /\.(scss|css)$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
extractCSS: true, /** 將css單獨(dú)打包成一個(gè)文件，默認(rèn)的是全部加載到有事業(yè) **/
參考文檔： 1.Nuxt.js將CSS提取到一個(gè)單獨(dú)的CSS文件 2.構(gòu)建配置
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別
- 淺談vue中$event理解和框架中在包含默認(rèn)值外傳參
- vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼
- vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車(chē)的復(fù)選框全選和反選功能
- 詳解如何在vue項(xiàng)目中使用layui框架及采坑
- vue前端框架—Mint UI詳解（更適用于移動(dòng)端）
- 詳解vantUI框架在vue項(xiàng)目中的應(yīng)用踩坑
- 學(xué)習(xí)Vue框架中必掌握的重點(diǎn)知識(shí)
相關(guān)文章
Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流
本文主要介紹了Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個(gè)使用?Vue.js?開(kāi)發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡(jiǎn)單案例,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue結(jié)合uniapp實(shí)現(xiàn)生成二維碼的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下2023-12-12
vue 解決provide和inject響應(yīng)的問(wèn)題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
在vue項(xiàng)目中假使我們?cè)谕粋€(gè)路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽(tīng)路由的變化的相關(guān)資料,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了vue 掛載路由到頭部導(dǎo)航的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式
路由權(quán)限控制常用于后臺(tái)管理系統(tǒng)中，對(duì)不同業(yè)務(wù)人員能夠訪問(wèn)的頁(yè)面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價(jià)值，感興趣的可以了解一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue概念及常見(jiàn)命令，介紹了vue.js聲明式渲染、雙向綁定及常用指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章主要介紹了Vue2.0用戶權(quán)限控制解決方案的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02