nuxt.js 填坑之路

初次接触nuxt.js

  1. vuex状态保存篇
    在传统页面中， 我们可以把vuex保存在sessionStorage中， 但是Nuxt.js使用的是服务端渲染， 因此并不存在window对象。
    既然这样， 我们该怎么办， 百度了一大堆， 没找到解决方法， 最后在官网看了一下。

在'nuxt.js官网 ， 搜索 asyncData;
'

asyncData.png

在里面， 我们可以找到 req这个变量。
req， 是请求对象， 里面存在header， 我们的cookie就会保存在里面。

在asyncData中， req.headers 传递给this然后在Mounted里面打印出来， 就是下面的内容

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"

在这里， 我们看到了我们设置的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 ''
  }
}

这样我们就拿到服务端的cookie了，
但是我发现一个问题， 在刷新的时候， 是可以从服务器拿到cookie, 但是当我们直接跳转页面， 却拿不到cookie了，
这样我们需要在请求里面再次做一些修改

在axios请求拦截里面， 我们判断， 如果在客户端， 就从客户端拿到cookie， 否则的话， 我们从服务器那cookie;

// 添加请求拦截器
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
    }
    // 在发送请求之前做些什么
    return config
  },

  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)
  1. 服务器部署篇

从package.json里面， 我们可以看到有以下几个命令。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",  // 打包压缩到.nuxt/dist
    "start": "nuxt start",    // 运行（build后的内容并启动服务器）
    "generate": "nuxt generate",  // 生成静态文件。
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

做一个ssr项目， 我刚开始， 竟然使用generate命令， 结果导致文件放上去后， 刷新页面出现了404未找到页面错误。后面才发觉， 原来服务端渲染， 是要在服务端运行Nuxt框架的Node, 这是它框架的服务端渲染， 而generate是静态文件。

既然这样， 我们就按照他们的来。

我们先执行build命令， 执行完毕后， 我们复制以下几个目录并放到服务器。

.nuxt
static
nuxt.config.js

弄好后， 我们先看看nuxt.js官网， 找到发布部署-----服务端渲染应用部署这里。
然后复制package.json内容并加到package.json文件内。 然后我们把package.json加入到上面提取出来的文件中。
package.json

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

之后， 我们在服务端部署Node， 并npm install， 之后我们就可以npm run start； 然后我们就算是部署成功了。

  1. 路径篇。

我们部署到服务器， 一般测试环境下面， 都会有几个子目录名字， 而nuxt.js打包出来的， 却是绝对路径。
这里我们以 ‘/m’为例。

比如我们的测试环境是 '127.0.0.1:80/m' ; 然而我们打印后的文件， 却并不存在'/m'这个目录， 这时候我们需要手动给他添加上。

下面是 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' 这里配置一个动态路径， 以方便我们修改。
然后在Link 和 scripts里面再进行修改

这里给它添加了/m这个路径， 结果就是'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'
      },
]

然后继续修改路径路径
我们的路由是 '127.0.0.1:80/m/index'
但是打包后的却是'127.0.0.1:80/index'
所以我们需要修改router配置
看下面代码， 我们给它加上Base， 这里的作用是， 给所有Nuxt-link标签和$router.push()都添加上'/m'； 所以最后我们访问的地址， 就变成了 '127.0.0.1:80/m/index'

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

最后： 我们打包（build） 后， 把文件放在服务器上， 但是， 在放到服务器之前， 我们还需要修改nuxt.config.js ，
这里，我需要打包后再修改routerPath

const routerPath = ''

然后运行 npm run start 就正式启动了服务端了。

注意： build.publicPath 是配置资源路径的， 在这里我们已经把文件放到了/m目录下了， 所以它的路径是没问题的，不需要在修改。

  1. 抽离篇

在做seo的时候， 需要把图片和样式和js都抽离出来， 这时候， 我们可以用nuxt.js官网提供的方法

nuxt.js提供的抽离css路径
在build里面加上extractCSS、publicPath、filenames代码就好了。

build: {
    extractCSS: { allChunks: true },    // css 独立打包 link 的形式加载
    publicPath: '/sample/assets/', //sample/essays 打包的默认路径为 ‘_nuxt’ 或者可以指定cdn 域名
    filenames:{         // css 和 js  img 打包时指定文件夹
      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]'
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,468评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,620评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,427评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,160评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,197评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,334评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,775评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,444评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,628评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,210评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,767评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2赞 341