淺談Vue服務端渲染框架Nuxt的那些事
Vue因其簡單易懂的API、高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),受到很多前端開發(fā)人員的青睞。國內(nèi)很多公司都在使用vue進行項目開發(fā),我們正在使用的簡書,便是基于Vue來構建的。
我們知道,SPA前端渲染存在兩大痛點:(1)SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息,使網(wǎng)站無法在搜索引擎中被用戶搜索到。(2)用戶體驗。大型webApp打包之后的js會很龐大,于是就有了按模塊加載,像require.js一樣,異步請求。webpack盛行,就變成了代碼分割。即便如此,受制于用戶設備,頁面初次渲染還是有可能很慢,白屏等待時間太長,對日益挑剔的用戶群體來說,無法接受。
因此,對于那些展示宣傳型頁面,如官網(wǎng),必須進行服務端渲染(SSR)。
Vue官方SSR文檔的配置太過繁瑣,需要對node和webpack有相當不錯的使用經(jīng)驗,對于一個前端小白而言,官方推薦NUXT。
NUXT是一款基于vue的服務端渲染框架,跟React的NEXT異曲同工。
最近公司在重構項目,為了有利于SEO,需要使用到服務端渲染,在查閱了一番資料后選擇了Nuxt.js,Nuxt.js 是一個基于 Vue.js 的通用應用框架,詳情可以看官網(wǎng),這里主要記錄下在使用過程中遇到的問題及解決方案。
技術棧:Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios
項目構建
Nuxt.js 官方提供了腳手架「 確保安裝了npx(npx在NPM版本5.2.0默認安裝了)」
npx create-nuxt-app <項目名> 按照提示選擇適合自己項目的配置即可
然后 npm run dev。
遇到的問題
一、router自定義
發(fā)現(xiàn)現(xiàn)在很多的框架都有一套自己的路由生成規(guī)則(基于vue-router)然后在對應的目錄下創(chuàng)建目錄,即會自己生成對應的路由,如果對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')
}]
})
}
對應的參考官方Nuxt.js自定義路由
自定義請求頭(基于axios請求的base_url修改)
需求描述:公司的有正式環(huán)境和特使環(huán)境對應不同的服務器,所以需要在請求的時候添加對應的請求頭,具體配置可以參考如下代碼:
package.json配置:
"scripts": {
"dev": "cross-env NODE_ENV=development PORT=3333 nuxt",
/** 本地環(huán)境:這里給環(huán)境變量NODE_ENV指定了對應的development的值和指定了運行端口 **/
"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代表本機的所有ip地址,即同網(wǎng)段其他機器也可以訪問的,
默認的127.0.0.1由于和本地ip綁定了,所以只有綁定到本機地址的服務能被同網(wǎng)段其他機器訪問**/
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
axios.js配置:
/** 自定義請求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默認就存在,所以不需要定義這個變量,如果需要聲明一個不存在的環(huán)境變量,需要在nuxt.config.js里面添加如下配置
/** 下面聲明了一個PATH_TYPE變量,其余的不需要改變,只需要將對應的NODE_ENV改成PATH_TYPE即可 **/
env: {
PATH_TYPE: process.env.PATH_TYPE
}
一定要看備注:要運行上面的示例,你需要運行npm install --save-dev cross-env 安裝 cross-env。如果你在非Windows環(huán)境下開發(fā),你可以不用安裝cross-env,這時需要把 start 腳本中的cross-env去掉。
打包webpack配置
nuxt.js框架默認使用過了一套配置,但是看了編譯出來的源碼后發(fā)現(xiàn)css文件全部在源碼里,感覺不是很利于收縮引擎的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單獨打包成一個文件,默認的是全部加載到有事業(yè) **/
參考文檔: 1.Nuxt.js將CSS提取到一個單獨的CSS文件 2.構建配置
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue+LogicFlow+Flowable實現(xiàn)工作流
本文主要介紹了Vue+LogicFlow+Flowable實現(xiàn)工作流,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12

