nuxt.js 填坑之路 - 簡(jiǎn)書

初次接觸nuxt.js

vuex狀態(tài)保存篇
在傳統(tǒng)頁面中，我們可以把vuex保存在sessionStorage中崭捍，但是Nuxt.js使用的是服務(wù)端渲染，因此并不存在window對(duì)象芽丹。
既然這樣，我們?cè)撛趺崔k跛蛋，百度了一大堆，沒找到解決方法痊硕，最后在官網(wǎng)看了一下赊级。

在'nuxt.js官網(wǎng) ，搜索 asyncData;
'

asyncData.png

在里面岔绸，我們可以找到 req這個(gè)變量理逊。
req，是請(qǐng)求對(duì)象盒揉，里面存在header晋被，我們的cookie就會(huì)保存在里面。

在asyncData中刚盈， req.headers 傳遞給this然后在Mounted里面打印出來羡洛，就是下面的內(nèi)容

accept
:
"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"
accept-encoding
:
"gzip, deflate"
accept-language
:
"zh-CN,zh;q=0.9"
cache-control
:
"no-cache"
connection
:
"keep-alive"
cookie
:
"BL_T_PROV=; SL_G_WPT_TO=zh-CN; SL_GWPT_Show_Hide_tmp=1; SL_wptGlobTipTmp=1; BL_D_PROV=; token=226c6078f274381d2efe8ecd54cc581f"
host
:
"10.10.1.188:3000"
pragma
:
"no-cache"
referer
:
"http://10.10.1.188:3000/m/person/myEssay/1"
upgrade-insecure-requests
:
"1"
user-agent
:
"Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

在這里，我們看到了我們?cè)O(shè)置的token; 既然這樣藕漱，我們可以在這里面拿到cookie欲侮。

  async asyncData ({ params, store , req}) {
      let token = b_getToken(req)
}

const b_getToken = function(req = {}) {
  if (req.headers && req.headers.cookie) {
    var req_Cookies = req.headers.cookie.split("; ")
    let tokens = ''
    req_Cookies.forEach(v => {
      if (v.indexOf("token=")>=0) {
        tokens = v
      }
    })
    return tokens.split('=')[1]
  } else {
    return ''
  }
}

這樣我們就拿到服務(wù)端的cookie了，
但是我發(fā)現(xiàn)一個(gè)問題肋联，在刷新的時(shí)候锈麸，是可以從服務(wù)器拿到cookie, 但是當(dāng)我們直接跳轉(zhuǎn)頁面，卻拿不到cookie了牺蹄，
這樣我們需要在請(qǐng)求里面再次做一些修改

在axios請(qǐng)求攔截里面，我們判斷薄翅，如果在客戶端沙兰，就從客戶端拿到cookie，否則的話翘魄，我們從服務(wù)器那cookie;

// 添加請(qǐng)求攔截器
instance.interceptors.request.use(
  function(config) {
    if (config.headers) {
      let cookie = config.headers['X-Auth0-Token'] || ''
      const token = process.client ? getCookie('token') : cookie
      config.headers["X-Auth0-Token"] = token
    }
    // 在發(fā)送請(qǐng)求之前做些什么
    return config
  },

  function(error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error)
  }
)

服務(wù)器部署篇

從package.json里面鼎天，我們可以看到有以下幾個(gè)命令。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",  // 打包壓縮到.nuxt/dist
    "start": "nuxt start",    // 運(yùn)行（build后的內(nèi)容并啟動(dòng)服務(wù)器）
    "generate": "nuxt generate",  // 生成靜態(tài)文件暑竟。
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

做一個(gè)ssr項(xiàng)目斋射，我剛開始，竟然使用generate命令但荤，結(jié)果導(dǎo)致文件放上去后罗岖，刷新頁面出現(xiàn)了404未找到頁面錯(cuò)誤。后面才發(fā)覺腹躁，原來服務(wù)端渲染桑包，是要在服務(wù)端運(yùn)行Nuxt框架的Node, 這是它框架的服務(wù)端渲染，而generate是靜態(tài)文件纺非。

既然這樣哑了，我們就按照他們的來赘方。

我們先執(zhí)行build命令，執(zhí)行完畢后弱左，我們復(fù)制以下幾個(gè)目錄并放到服務(wù)器窄陡。

.nuxt
static
nuxt.config.js

弄好后，我們先看看nuxt.js官網(wǎng)拆火，找到發(fā)布部署-----服務(wù)端渲染應(yīng)用部署這里跳夭。
然后復(fù)制package.json內(nèi)容并加到package.json文件內(nèi)。然后我們把package.json加入到上面提取出來的文件中榜掌。
package.json

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

之后优妙，我們?cè)诜?wù)端部署Node，并npm install憎账，之后我們就可以npm run start套硼；然后我們就算是部署成功了。

路徑篇胞皱。

我們部署到服務(wù)器邪意，一般測(cè)試環(huán)境下面，都會(huì)有幾個(gè)子目錄名字反砌，而nuxt.js打包出來的雾鬼，卻是絕對(duì)路徑。
這里我們以 ‘/m’為例宴树。

比如我們的測(cè)試環(huán)境是 '127.0.0.1:80/m' ; 然而我們打印后的文件策菜，卻并不存在'/m'這個(gè)目錄，這時(shí)候我們需要手動(dòng)給他添加上酒贬。

下面是 nuxt.config.js 的代碼又憨。

const path = require('path')
const merge = require('webpack-merge')
const pkg = require('./package')
const routerPath = '/m'
const webpack = require("webpack")
module.exports = {
  mode: 'universal',
  head: {
    title: '尖鋒咖',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' },
      { name: "renderer", content: "webkit" },
      { name: "force-rendering", content: "webkit" },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${routerPath}/favicon.ico` },
      { rel: 'stylesheet', href: `${routerPath}/css/base.css` }
    ],
    script: [
      {
        src: `${routerPath}/js/lib-flexible.js`, type: 'text/javascript', charset: 'utf-8'
      },
      {
        src: 'http://dup.baidustatic.com/js/ds.js', type: 'text/javascript', charset: 'utf-8'
      },
      {
        src: `${routerPath}/js/weixin-1.4.0.js`, type: 'text/javascript', charset: 'utf-8'
      },
      {
        src: `${routerPath}/js/vconsole.min.js`, type: 'text/javascript', charset: 'utf-8'
      },
    ]
  },
  loading: { color: '#fff' },
  css: [
  ],
  plugins: [
    {
      src: "~plugins/vant.js"
    },
    {
      src: "~plugins/VueQuillEditor.js",
      ssr: false
    }
  ],
  modules: [
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },
  // router: {
  //   base: '/app/'
  // },
  /*
  ** Build configuration
  */
  router: {
    base: `${routerPath}/`,
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    },
  },
  build: {
    /*
    ** You can extend webpack config here
    */
    publicPath: '',
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    postcss: [
      require('postcss-px2rem')({
        remUnit: 75
      })
    ],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // console.log('extend', config, ctx)
      config.resolve = merge(config.resolve, {
        alias: {
          'components': path.resolve(__dirname, 'components'),
          'assets': path.resolve(__dirname, 'assets'),
          'pages': path.resolve(__dirname, 'pages'),
          'http': path.resolve(__dirname, 'http'),
          'utils': path.resolve(__dirname, 'utils'),
          'store': path.resolve(__dirname, 'store')
        }
      })
    },
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
}

我們先看 const routerPath = '/m' 這里配置一個(gè)動(dòng)態(tài)路徑，以方便我們修改锭吨。
然后在Link 和 scripts里面再進(jìn)行修改

這里給它添加了/m這個(gè)路徑蠢莺，結(jié)果就是'127.0.0.1:80/m/favicon.ico'這樣的路徑了。

   link: [
      { rel: 'icon', type: 'image/x-icon', href: `${routerPath}/favicon.ico` },
      { rel: 'stylesheet', href: `${routerPath}/css/base.css` }
    ],
    script: [
      {
        src: `${routerPath}/js/lib-flexible.js`, type: 'text/javascript', charset: 'utf-8'
      },
]

然后繼續(xù)修改路徑路徑
我們的路由是 '127.0.0.1:80/m/index'
但是打包后的卻是'127.0.0.1:80/index'
所以我們需要修改router配置
看下面代碼零如，我們給它加上Base躏将，這里的作用是，給所有Nuxt-link標(biāo)簽和$router.push()都添加上'/m'考蕾；所以最后我們?cè)L問的地址祸憋，就變成了 '127.0.0.1:80/m/index'

  router: {
    base: `${routerPath}/`,
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    },
  },

最后：我們打包（build）后，把文件放在服務(wù)器上肖卧，但是夺衍，在放到服務(wù)器之前，我們還需要修改nuxt.config.js ，
這里沟沙，我需要打包后再修改routerPath

const routerPath = ''

然后運(yùn)行 npm run start 就正式啟動(dòng)了服務(wù)端了河劝。

注意： build.publicPath 是配置資源路徑的，在這里我們已經(jīng)把文件放到了/m目錄下了矛紫，所以它的路徑是沒問題的赎瞎，不需要在修改。

抽離篇

在做seo的時(shí)候颊咬，需要把圖片和樣式和js都抽離出來务甥，這時(shí)候，我們可以用nuxt.js官網(wǎng)提供的方法

nuxt.js提供的抽離css路徑
在build里面加上extractCSS喳篇、publicPath敞临、filenames代碼就好了。

build: {
    extractCSS: { allChunks: true },    // css 獨(dú)立打包 link 的形式加載
    publicPath: '/sample/assets/', //sample/essays 打包的默認(rèn)路徑為 ‘_nuxt’ 或者可以指定cdn 域名
    filenames:{         // css 和 js  img 打包時(shí)指定文件夾
      app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
      chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
      css: ({ isDev }) => isDev ? '[name].js' : '[contenthash].css',
      img: ({ isDev }) => isDev ? '[path][name].[ext]' : '[hash:7].[ext]'
    }
}