前端vue配置nginx

将Vue Router的history模式部署在Nginx下需要进行一些配置。主要包括以下几步：

1. 在Nginx配置文件中，添加一条location规则，将所有匹配到的请求都指向index.html文件。

2. 配置Vue Router的base路径，即Vue.js开发环境中在router/index.js文件中的base选项，设为Nginx服务的根路径（例如：/project-name/）。

3. 配置Nginx的try_files选项，用于重定向请求到正确的URL。具体方式为将Nginx的try_files选项与Vue Router的fallback选项进行关联。

以上是实现Vue Router history模式在Nginx下部署的主要步骤。需要注意的是，对于不同版本的Nginx和Vue Router，具体的配置方式可能会有所不同。

相关问题

那前端vue和Nginx如何约定不同地址的接口请求做反向代理

在前端Vue应用中，可以通过配置Vue的代理来实现将请求发送给Nginx反向代理服务器。具体的实现方式如下：

1.在Vue项目的根目录下，找到`vue.config.js`文件，如果没有则需要手动创建。

2.打开`vue.config.js`文件，添加如下代码：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8888', // 要代理的服务器地址
                pathRewrite: {
                    '^/api': '' // 将/api重写为空
                }
            }
        }
    }
}

3.在Vue应用中，发送请求时，将请求地址改为`/api/xxx`的形式，例如：

axios.get('/api/user')

这样，当请求发送到`/api/user`时，Vue的代理就会将其转发到Nginx反向代理服务器，Nginx再将请求转发到真正的后端服务器进行处理。

需要注意的是，这里的`/api`只是一个示例，可以根据实际情况进行修改。同时，由于涉及到跨域问题，Nginx也需要进行相应的配置，具体的配置方式可以参考我之前回答的问题。

nginx部署前端vue项目 配置示例

Nginx是一个流行的开源Web服务器和反向代理服务器，常用于静态内容的高效分发和动态请求的路由。要在Nginx上部署前端Vue项目的静态文件，并处理API请求，你可以按照以下步骤配置：

1. **安装Nginx**（假设已经安装）：
如果你是Linux用户，可以在终端运行`sudo apt-get update && sudo apt-get install nginx`。

2. **创建Vue项目的目录结构**：
创建一个名为`your-project-name`的目录，其中包含`dist`目录，这是Vue构建后的生产环境文件。

3. **配置Nginx**：
在Nginx的配置文件（通常是`/etc/nginx/sites-available/default`）中，添加或编辑以下内容。请注意，你需要根据实际路径替换`/path/to/your/project`：

server {
    listen 80; # 可能需要修改为特定端口，比如443或8080
    server_name your-domain.com; # 替换为你的域名

    root /path/to/your/project/dist; # Vue项目部署目录

    index index.html; # 设置默认首页
    try_files $uri $uri/ =404; # 处理非存在的URL

    location /api { # 对于API请求
        proxy_pass http://localhost:3000; # 指向Vue应用的后端API
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    error_page 404 /404.html; # 自定义404页面
}

4. **启动Vue服务**：
在Vue项目中，如果你有一个如`npm run serve`启动本地服务器的命令，记得先启动这个服务。

5. **启用Nginx配置**：
`sudo ln -s sites-available/your-site.conf sites-enabled/`，然后重启Nginx：`sudo service nginx restart`。

6. **测试部署**：
打开浏览器访问`http://your-domain.com`，查看是否显示Vue项目的首页，API请求则指向`http://your-domain.com/api`。