Nginx 命令与 Vue 项目 History 模式部署最佳实践

前端

2023-09-04 06:33:18

Nginx 基础命令

Nginx 是一个高性能的 Web 服务器，也是最流行的 Web 服务器之一。它以其稳定性、速度和灵活性而闻名。Nginx 提供了丰富的命令来配置服务器，包括：

nginx -h ：显示 Nginx 的帮助信息。
nginx -V ：显示 Nginx 的版本号。
nginx -t ：测试 Nginx 配置文件的语法是否正确。
nginx -s reload ：重新加载 Nginx 配置文件。
nginx -s stop ：停止 Nginx 进程。
nginx -s quit ：退出 Nginx 进程。

Vue 项目 History 模式部署

Vue 项目通常使用 Hash 模式来进行路由。Hash 模式在浏览器的地址栏中使用 # 符号来区分不同的路由。这种模式的好处是简单易用，不需要服务器端配置。但是，Hash 模式也有一些缺点，例如：

不利于 SEO：搜索引擎无法抓取 Hash 模式的 URL，因此会影响网站的搜索排名。
不利于单页应用：单页应用需要使用 JavaScript 来改变页面内容，而 Hash 模式会使 JavaScript 难以正常工作。

为了解决这些问题，Vue 项目可以部署 History 模式。History 模式在浏览器的地址栏中不使用 # 符号，而是使用 / 符号来区分不同的路由。这种模式的好处是：

有利于 SEO：搜索引擎可以抓取 History 模式的 URL，因此可以提高网站的搜索排名。
有利于单页应用：单页应用可以使用 JavaScript 来正常改变页面内容。

但是，History 模式也有一些缺点，例如：

需要服务器端配置：History 模式需要服务器端支持，因此需要在服务器上配置 Nginx 或 Apache 等 Web 服务器。
可能存在安全风险：History 模式可能会使网站面临 CSRF 攻击的风险。

Nginx 配置 History 模式

要使 Vue 项目能够使用 History 模式，需要在服务器上配置 Nginx。Nginx 的配置如下：

server {
    listen 80;
    server_name www.example.com;
    root /var/www/html/vue-project;

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

    location /api/ {
        proxy_pass http://localhost:3000;
    }
}

在上面的配置中：

listen 80;：指定 Nginx 监听的端口。
server_name www.example.com;：指定 Nginx 监听的域名。
root /var/www/html/vue-project;：指定 Nginx 的根目录。
location / {：指定 Nginx 处理请求的规则。
try_files $uri $uri/ /index.html;：指定 Nginx 如何处理请求的 URI。
location /api/ {：指定 Nginx 处理 API 请求的规则。
proxy_pass http://localhost:3000;：指定 Nginx 将 API 请求代理到哪个服务器。

Vue 项目配置 History 模式

在 Vue 项目中，需要配置路由器以支持 History 模式。在 main.js 文件中，将 VueRouter 的 mode 选项设置为 'history'。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router