Vue.js + History Mode + Nginx的应用实践

小蓝 • 2024-11-19 18:58 • 编程

一、 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反向代理的配置方法。在实际开发中，我们可以根据需要进行二次开发，以满足我们的业务需求。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/159274.html