Vue.js + History Mode + Nginx的應用實踐

一、 Vue.js

Vue.js是一款輕量級MVVM框架，是目前國內外最受歡迎的前端框架之一。Vue.js具有簡單易學、易使用、靈活、高效等特點。

Vue.js官方提供了vue-cli腳手架工具能夠快速搭建起前端項目的基礎架構。其中最主要的特點就是：高效、快捷、可擴展、高度集成化等。

二、History Mode

Vue.js提供了一個後端路由模式——Hash模式來路由跳轉，它使用錨點( # )作為路由切換的標記。但是在實際應用開發當中，需要實現美觀、友好的路由結構，因此就需要使用前端路由模式——History模式。

History模式實際上是通過HTML5的history.pushState()和history.replaceState()方法來完成URL地址的變化，即整個URL地址呈現為一種真實的URL地址模式。在使用History模式的時候，需要使用後端配置進行支持，我們可以使用Nginx作為我們的HTTP服務器進行部署。

三、Nginx

Nginx是一款高性能的HTTP服務，同時也可以作為反向代理服務器、郵件服務器等。特殊是在高並發情況下，Nginx是非常適合作為負載均衡服務器。

我們可以通過Nginx來解決使用History模式下的路由問題。

location / {
    try_files $uri $uri/ /index.html;
}

在Nginx配置文件中加入以上代碼，即可實現在History模式下路由的正確展示。

四、應用實踐

接下來，我們來實際操作一下Vue.js + History Mode + Nginx的應用實踐。

我們可以通過vue-cli腳手架來快速進行項目的創建和配置。

# 全局安裝 vue-cli
npm install -g vue-cli

# 初始化一個基於 webpack 模板的新項目
vue init webpack my-project

# 安裝項目依賴，走你
cd my-project
npm install
npm run dev

其中需要在Vue.js的router.js文件中進行配置，示例代碼如下：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 定義路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About'),
  },
];

const router = new Router({
  mode: 'history',
  // 注意這裡的 base 可以配置為你項目的子路由如 /blog/
  base: process.env.BASE_URL,
  routes,
});

export default router;

以上代碼即定義了兩個路由，一個是Home，一個是About。然後我們通過實例化Router，然後exports出去以供使用。

其次，我們需要在Nginx配置文件中配置，示例代碼如下：

upstream vueDemo {
    server 127.0.0.1:8080;
}

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://vueDemo;
        index  index.html index.htm;
        # 根據Vue.js的History Mode配置來發現文件
        try_files $uri $uri/ /index.html;
    }
}

以上代碼即是Nginx進行配置的主要部分。主要是通過upstream來配置反向代理的服務，同時location /中，通過try_files來實現使用Vue.js的History Mode配置來發現文件，實現路由的正常跳轉。

最後，我們在控制台中運行以下代碼：

# 安裝Nginx
sudo apt-get update
sudo apt-get install nginx

# 啟動Nginx
sudo service nginx start

以上代碼即安裝了Nginx，並將其啟動起來。

五、總結

通過以上Vue.js + History Mode + Nginx的應用實踐，我們了解到了Vue.js、History模式的基本實現和Nginx反向代理的配置方法。在實際開發中，我們可以根據需要進行二次開發，以滿足我們的業務需求。