Vue服務端渲染框架Nuxt的那些事

Vue服務端渲染框架Nuxt的那些事

最近公司在重構項目，爲了有利於SEO，須要使用到服務端渲染，在查閱了一番資料後選擇了Nuxt.js，Nuxt.js 是一個基於 Vue.js 的通用應用框架，詳情能夠看官網，這裏主要記錄下在使用過程當中遇到的問題及解決方案。
技術棧：Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios

---

1. 項目構建

   Nuxt.js 官方提供了腳手架「 確保安裝了npx（npx在NPM版本5.2.0默認安裝了）」
      npx create-nuxt-app <項目名>  按照提示選擇適合本身項目的配置便可
      而後 npm run dev。

2. 遇到的問題
   1、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自定義路由

3. 自定義請求頭（基於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屬性修改

4. 打包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：杭州前端一枚：若有疑惑歡迎留言諮詢或者474268433@qq.com 🤓🤓