基于Vue.js的SSR方案之Nuxt.js打賞

前端技術真是分分合合、合合分分,從前些年HTML、CSS、JavaScript混寫到模塊化的CommonJS、AMD、CMD,模塊多了影響加載,又有了grunt、gulp、webpack等打包工具,最后發展到現在類似Vue的單文件組件,表面來看,似乎更爽了,但這樣的模塊化還是要靠寫的人來把控了,稍有不慎,團隊還真有人把.vue玩成當年的.html。

今天要說的是最近了解的一款基于Vue.js的SSR框架——Nuxt.js,用過react.js的童鞋可能都或多或少接觸過Next.js,沒錯,這玩意和它是做同一件事的,正如前面所說,分分合合、合合分分,前后端分離好不容易在國內實施得火熱起來,可百度并不怎么認你的單頁App,且盲目使用之余,很多App文件過于龐大,以至于按需加載后首頁渲染性能還是不理想,面對這樣的問題,有SEO需求、對首屏渲染有提升要求的技術小伙伴們又在前端的小圈子里劃分出了服務端,也因此有了傳統型的express、koa、adonisJS等,但這并不能阻止我們前進的腳步,回到現實,當前火熱的react.js、angularjs、vue.js都有了服務器端渲染方案,于是因為工作用vue.js的緣故,接觸了Nuxt.js。

有點跑題,下面簡單介紹下:

Nuxt.js是Vue進行SSR的一個優選開源項目,可免去繁瑣的Webpack、nodejs后臺服務配置等操作,方便的搭建一個支持SSR的VUE項目,據說尤大神曾去拜訪過其作者,且多次在微博提及該項目。

Nuxt.js官方提供包括中文在內的五種語言文檔,安裝使用也十分親民,提供了以下四種vue-cli初始化模板:

starter: Basic Nuxt.js project template

express: Nuxt.js + Express

koa: Nuxt.js + Koa

adonuxt: Nuxt.js + AdonisJS

喜歡自己動手靈活控制的童鞋也可以直接創建package.json,然后安裝nuxt

npm i nuxt --S

最后在根目錄創建pages的即可自動生成路由

由于Nuxt.js官方文檔目前已經覆蓋了大部分常用需求,這里不多拷貝,下面說一下使用中遇到的一些官方介紹不充分的地方。

1、代理

本地開發經常api跨域,常用node提供api代理服務來繞過該問題,Nuxt.js默認模板自然也提供了該能力,在官方找github找到modules目錄,下面就有提供基于axios的代理模塊配置,具體參考https://github.com/nuxt-community/modules/tree/master/modules/proxy

目前該模塊只支持默認模板,不過express、koa等將Nuxt.js以中間件形式渲染視圖的情況下,我們依然可以手動注冊Nuxt.js中間件或者以純express、koa應用形式配置proxy中間件。

2、第三方庫引用

官方不屏蔽你正常的import,但有提供插件模式且推薦使用插件模式,比如我想把element-ui和nuxt.js結合做后臺管理系統,有些欠缺,經過第三方博客等了解嘗試,得出如下配置

第一步,plugins目錄下創建element-ui.js(或你自己喜歡的名字,只需后續配置時對應插件名為文件名即可),寫入:

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

第二部,根目錄找到或者創建nuxt.config.js配置文件,按照官方指引,配置plugins如下:

plugins: [{src: '~plugins/element-ui', ssr: true}]

ssr配置為true表示服務端渲染,因為Nuxt.js做到了前后端同構且首屏服務端渲染,后續客戶端渲染,1.1.0之前element-ui不支持服務端渲染,需要配置ssr:false,且插件內指定只適用于客戶端構建,只目前最新版已完美支持,無需關注此項

全局需要的樣式也需要在nuxt.config.js配置

css: ['element-ui/lib/theme-default/index.css']

如果希望element-ui這樣的第三方庫打包進vendor文件,需要在build下的vendor項配置

vendor: ['element-ui']

第三部,按需加載

注釋掉前面的配置,使用babel插件,在build下配置babel,安裝插件babel-plugin-component

npm i babel-plugin-component -D

配置插件如下

babel: {
  plugins: [['component', [
    {
      'libraryName': 'element-ui',
      'styleLibraryName': 'theme-default'
    },
    'transform-async-to-generator',
    'transform-runtime'
  ]]],
  comments: false
}

使用時按照常規,我們根據需要導出個別組件并注冊到Vue,然后正常使用即可。其他的如vux、mint-ui都可以如此配置使用,可以大大降低打包文件大小。

下面是我demo配置文件實例,貼出來以便參考

module.exports = {
  /*
   ** Headers of the page
   */
  head: {
    title: '樸人博客',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: '樸人博客'}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: false,
  /*
   ** Build configuration
   */
  css: ['element-ui/lib/theme-default/index.css'],
  plugins: [{src: '~plugins/element-ui', ssr: true}],
  modules: [
    // npm install @nuxtjs/proxy -D
    ['@nuxtjs/proxy']
  ],
  proxy: {
    '/api': {
      pathRewrite: {'^/api': '/api'},
      target: 'http://10.5.21.10:8080'
    }
  },
  build: {
    publicPath: '/resources/',
    filenames: {
      vendor: 'vendor.[hash].js',
      app: 'static.[chunkhash].js'
    },
    vendor: ['element-ui'],
    babel: {
      plugins: [['component', [
        {
          'libraryName': 'element-ui',
          'styleLibraryName': 'theme-default'
        },
        'transform-async-to-generator',
        'transform-runtime'
      ]]],
      comments: false
    },
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}
基于Vue.js的SSR方案之Nuxt.js
文章《基于Vue.js的SSR方案之Nuxt.js》二維碼
  • 微信打賞
  • 支付寶打賞

已有3條評論

  1. 素材火

    對我來說竟然有點高深

    2017-09-07 10:48 回復
  2. 游客 211

    很不錯,謝謝分享

    2017-07-29 17:47 回復
  3. 加氣塊設備

    感謝分享

    2017-07-28 08:34 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖