Vue 服務端渲染（SSR）、Nuxt2 - 從入門到實踐

時間 2019-11-07

標籤 vue 服務渲染 ssr nuxt2 nuxt 入門實踐简体版

原文原文鏈接

前言

以nuxt做爲vue的服務端渲染，適合剛接觸或者準備上vue ssr的同窗參考和學習，此項目涉及註冊、登陸、商品展現、地址管理等等，從前端到後端到最後到服務端部署，讓你體驗到全棧開發到樂趣。前端

項目地址如遇網絡不佳，請移步國內鏡像加速節點vue

效果演示

查看demo請戳這裏（請用chrome手機模式預覽）node

移動端掃描下方二維碼

API接口文檔

接口文檔地址（基於apidoc）webpack

技術棧

vue2 + vuex + vue-router + mint-ui + nuxtios

項目運行

git clone git@github.com:EasyTuan/nuxt-elm.git

# 國內鏡像加速節點:git@gitee.com:easytuan/node-elm-api.git

cd nuxt-elm

npm install

npm run dev

#模版快速生成
npm run tep `文件名`

# pm2部署
npm run start

複製代碼

補充

此項目有配套的後臺系統，若是想體驗先後臺同時開發，能夠下載對應的後臺系統：後臺項目傳送地址。nginx

若是隻作前端開發，請忽略這句話。git

目標功能

[x] 商家列表 -- 完成
[x] 購物車功能 -- 完成
[x] 餐館食品列表頁 -- 完成
[x] 店鋪評價頁面 -- 完成
[x] 商家詳情頁 -- 完成
[x] 登陸、註冊 -- 完成
[x] 修改密碼 -- 完成
[x] 我的中心 -- 完成
[x] 紅包 -- 完成
[x] 收貨地址 -- 完成

業務介紹

目錄結構github

├── assets               // 靜態資源
│   ├── images                // 圖片資源
│   ├── services              // api請求
│   ├── styles                // 樣式文件
│   └── utils                 // 經常使用工具類
├── components           // 組件
├── config
│   └── index.js              // 配置文件
├── layouts              // 佈局
├── middleware           // 中間件
├── pages                // 頁面
├── plugins              // 插件
├── static               // 靜態資源
└── store                //vuex狀態樹
複製代碼

部分截圖展現

首頁展現

我的資料

個人

訂餐

商家評價

說明

若是對您有幫助，您能夠點擊項目 "Star" 支持一下謝謝！ ^_^web

或者您能夠 "follow" 一下，我會不斷開源更多的有趣的項目vue-router

若有問題請直接在 Issues 中提，或者您發現問題並有很是好的解決方案，歡迎 PR 👍

開發平常記錄

nuxt模版搭建

這裏關於項目初始化，我是直接使用的 Nuxt 官網提供的 starter 模板

 # 安裝 vue-cli
npm install -g vue-cli
 # 初始化項目
vue init nuxt-community/starter-template nuxt-ssr-demo
 # 安裝依賴
cd nuxt-ssr-demo
npm install
 # 啓動本地服務
npm run dev

複製代碼

訪問 http://localhost:3000 ，如今咱們來看下初始化好的項目目錄

├── assets                      // 靜態資源
├── components                  // 全局組件
├── layouts                     // 頁面佈局
├── middleware                  // 中間件
├── pages                       // 路由頁面
├── static                      // 靜態資源，打包文件名不會被hash
├── store                       // vuex
├── nuxt.config.js              // nuxt配置文件
├── package.json
├── README.md

複製代碼

注意：nuxt默認會讀取pages裏面的vue文件，自動生成路由，如須要自定義路由，可在nuxt.config.js中配置對應參數。

request請求封裝

數據和展現層的剝離是有必要的，這也是爲何前端都提倡MV*的設計模式，而對request請求封裝是咱們第一步要完成的。這裏我選了axios做爲HTTP請求客戶端，axios兼容瀏覽器端和node端，同時提供了請求攔截、響應攔截等讓咱們開發更加愉快的功能。

在 config/index.js 中寫入：

const json = require('../package.json');
const port = json.config.nuxt.port;

module.exports = {
  IS_RELEASE: true, // true線上，false測試

  BASE_URL: `http://localhost:${port}/api`, // 測試

  // BASE_URL: `https://elm.caibowen.net/api`, // 生產

  // IMG_URL: 'http://localhost:9000/', // 測試

  IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/', // 生產（使用碼雲Gitee Pages 服務）

  HEADERS: {
    'Content-Type': 'application/json;charset=UTF-8'
  },

  TIMEOUT: 12000, // api超時時間

};

複製代碼

在 assets/utils/request.js 中寫入：

import axios from 'axios';
import config from '~/config';
import { Toast } from 'mint-ui';

axios.defaults.baseURL = config.BASE_URL;
axios.defaults.timeout = config.TIMEOUT;
axios.defaults.headers = config.HEADERS;

// 請求攔截器
axios.interceptors.request.use( request => {
  if (!config.IS_RELEASE) {
    console.log(
      `${new Date().toLocaleString()}【 M=${request.url} 】P=`,
      request.params || request.data,
    );
  }
  return request;
}, error => {
  return Promise.reject(error);
});

export default async (options = { method: 'GET' }) => {
  let isdata = true;
  if (
    options.method.toUpperCase() !== 'POST'
    && options.method.toUpperCase() !== 'PUT'
    && options.method.toUpperCase() !== 'PATCH'
  ) {
    isdata = false;
  }
  const res = await axios({
    method: options.method,
    url: options.url,
    data: isdata ? options.data : null,
    params: !isdata ? options.data : null,
  });
  if (res.status >= 200 && res.status < 300) {
    if (!config.IS_RELEASE) {
      console.log(
        `${new Date().toLocaleString()}【接口響應：】`,
        res.data,
      );
    }
    // 瀏覽器環境彈出報錯信息
    if(typeof window !== "undefined" && res.data.code !== 0) {
      Toast(res.data.msg);
    }
    return res.data;
  }else {
    if(typeof window !== "undefined" && res.data.code !== 0) {
      Toast('請求錯誤');
    }
  }

};

複製代碼

最後全部api請求都寫進server.js文件，方便統一管理。

跨域處理

使用過 vue 的同窗，確定知道對於項目中的跨域，vue-cli 對 webpack 中的 proxy 選項進行了一層封裝。它暴露出來的是一個叫 proxyTable 的選項，是對 webpack 中的 proxy 和其三方插件 http-proxy-middleware 的一個整合。

不幸的 Nuxt 中沒有 proxyTable 這麼一個配置項來進行跨域的配置。固然幸運的是，在 Nuxt 中你能夠直接經過配置 http-proxy-middleware 來處理跨域。更幸運的是 Nuxt 官方提供了兩個包來處理 axios 跨域問題。

首先，進行安裝

npm i @nuxtjs/axios @nuxtjs/proxy -D
複製代碼

而後在 nuxt.config.js 文件裏進行配置

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: [
    [
      '/api',{
        // target: 'http://localhost:9000',
        target: 'https://elm-api.caibowen.net',
        changeOrigin: true,
        pathRewrite: { '^/api' : '/' }
      }
    ]
  ],
複製代碼

而後你就能夠安心使用你的 axios 進行跨域請求了

項目部署

到這一步的同窗，你得先確保你擁有一個本身的服務器。若是沒有的話，趕忙去買一個（我不會和你說AWS和google雲有提供免費一年的雲服務器試用）

OK，文章繼續。在進行部署講解前，咱們先看一下 Nuxt 提供的幾個命令

命令	描述
nuxt	啓動一個熱加載的 Web 服務器（開發模式） localhost:3000
nuxt build	利用 webpack 編譯應用，壓縮 JS 和 CSS 資源（發佈用）
nuxt start	以生成模式啓動一個 Web 服務器 (`nuxt build` 會先被執行)
nuxt generate	編譯應用，並依據路由配置生成對應的 HTML 文件 (用於靜態站點的部署)

開始部署

上傳代碼到服務器，而後執行命令nuxt build && nuxt start 監聽3000端口。接下來，開始配置你的 nginx （用於端口轉發）

server {
  # 端口，http爲 80，若是部署了https請監聽 443
  listen 80;
  # 域名
  server_name elm.caibowen.net;
  # 反向代理
  location / {
    proxy_pass http://localhost:3000;
  }
}
複製代碼

而後重啓 nginx