Vue项目访问路径加前缀——前后端分离+nginx+Vue路由

前端

2023-07-16 07:44:39

在 Vue 项目中为访问路径添加前缀：前后端分离+Nginx+Vue 路由

为 Vue 项目添加访问路径前缀的指南

在开发 Vue 项目时，有时需要为其访问路径添加前缀。例如，您可能希望项目的所有路由都以/app开头，以便与其他应用程序区分开来。通过结合前后端分离、Nginx 和 Vue 路由，您可以轻松实现此目的。

一、Nginx 配置

安装 Nginx

如果您的服务器上尚未安装 Nginx，请使用以下命令安装：
```
sudo apt install nginx
```
配置 Nginx

打开 Nginx 配置文件（通常为/etc/nginx/nginx.conf），并添加以下配置：
```
server {
    listen 80;
    server_name example.com;

    location /prefix {
        proxy_pass http://127.0.0.1:8080;
    }
}
```
- listen 80;：监听 80 端口
- server_name example.com;：指定服务器名称
- /prefix：需要添加前缀的路径
- proxy_pass http://127.0.0.1:8080;：将请求转发到本地 8080 端口

二、Vue 路由配置

安装 Vue 路由

在您的 Vue 项目中，使用以下命令安装 Vue 路由：
```
npm install vue-router
```

配置 Vue 路由

在您的项目中，打开src/router/index.js文件，并添加以下配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    }
]

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

export default router

mode: 'history'：使用 history 模式
base: '/prefix'：将所有路由路径加上/prefix前缀

三、运行项目