Vue服務端渲染框架Nuxt的那些事
最近公司在重構項目,爲了有利於SEO,需要使用到服務端渲染,在查閱了一番資料後選擇了Nuxt.js,Nuxt.js 是一個基於 Vue.js 的通用應用框架,詳情可以看官網,這裏主要記錄下在使用過程中遇到的問題及解決方案。
技術棧:Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios
-
項目構建
Nuxt.js 官方提供了腳手架「 確保安裝了npx(npx在NPM版本5.2.0默認安裝了)」 npx create-nuxt-app <項目名> 按照提示選擇適合自己項目的配置即可 然後 npm run dev。
-
遇到的問題
一、router自定義
發現現在很多的框架都有一套自己的路由生成規則(基於vue-router)然後在對應的目錄下創建目錄,即會自己生成對應的路由,如果對url的路徑沒有要求的這樣也是可以的,如果想要自定義路由的話,就需要添加些配置。具體如下: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修改)
需求描述:公司的有正式環境和特使環境對應不同的服務器,所以需要在請求的時候添加對應的請求頭,具體配置可以參考如下代碼:
package.json配置:"scripts": { "dev": "cross-env NODE_ENV=development PORT=3333 nuxt", /** 本地環境:這裏給環境變量NODE_ENV指定了對應的development的值和指定了運行端口 **/ "build": "cross-env NODE_ENV=online nuxt build", /** 打包:指定了環境變量的值爲online **/ "start": "HOST=0.0.0.0 PORT=3333 nuxt start", /** 打包:指定了環境變量的值爲online 端口爲3333 HOST爲0.0.0.0 百度了一下, 0.0.0.0代表本機的所有ip地址,即同網段其他機器也可以訪問的, 默認的127.0.0.1由於和本地ip綁定了,所以只有綁定到本機地址的服務能被同網段其他機器訪問**/ "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默認就存在,所以不需要定義這個變量,如果需要聲明一個不存在的環境變量,需要在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環境下開發,你可以不用安裝cross-env,這時需要把 start 腳本中的cross-env去掉。
官方文檔:1.主機和端口配置 2.dev屬性修改 -
打包webpack配置
nuxt.js框架默認使用過了一套配置,但是看了編譯出來的源碼後發現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單獨打包成一個文件,默認的是全部加載到有事業 **/
參考文檔: 1.Nuxt.js將CSS提取到一個單獨的CSS文件 2.構建配置
End:杭州前端一枚:如有疑惑歡迎留言諮詢或者[email protected] 🤓🤓