本篇內(nèi)容介紹了“Vue服務(wù)端渲染框架Nuxt的步驟”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

蒼梧網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司2013年開(kāi)創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

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)難以抓取客戶(hù)端渲染的頁(yè)面meta信息和其他SEO相關(guān)信息，使網(wǎng)站無(wú)法在搜索引擎中被用戶(hù)搜索到。（2）用戶(hù)體驗(yàn)。大型webApp打包之后的js會(huì)很龐大，于是就有了按模塊加載，像require.js一樣，異步請(qǐng)求。webpack盛行，就變成了代碼分割。即便如此，受制于用戶(hù)設(shè)備，頁(yè)面初次渲染還是有可能很慢，白屏等待時(shí)間太長(zhǎng)，對(duì)日益挑剔的用戶(hù)群體來(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)]有要求的這樣也是可以的，如果想要自定義路由的話(huà)，就需要添加些配置。具體如下：

  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)不同的

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)建配置

“Vue服務(wù)端渲染框架Nuxt的步驟”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！