首页 > 网站技巧 > 服务器 > nginx > Nginx解决vue项目服务器部署

Nginx解决vue项目服务器部署及跨域访问后端详解

2022-11-08 10:58:28 作者：紫米粥

跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,这篇文章主要给大家介绍了关于Nginx解决vue项目服务器部署及跨域访问后端的相关资料,需要的朋友可以参考下

准备

（1）首先是一个Vue项目。

（2）其次准备好服务器（在这里我是用虚拟机VMware）。

（3）准备好一个SpringBoot后端代码。

（4）服务器上必须安装Nginx。

1、前端代码注意事项：

（1）在这里我是用vuecli3脚手架创建的vue项目的，所以项目创建完毕之后是没有vue.config.js的。

其实这个文件的创建是为了本地测试解决前后端跨域问题的，但是在打包项目的时候需要把这里关于跨域的代码需要注释。

// vue.config.js

module.exports = {
    publicPath: './',
    runtimeCompiler: true,
    // devServer:{
    //     port:83,
    //     proxy:{
    //         '/api':{
    //             target:"http://localhost:8086",
    //             changOrigin: true,  //允许跨域
    //             pathRewrite:{
    //                 '^/api':''  //重写路径
    //             }
    //         }
    //     }
    // }
}

（2）第二点前端配置的请求路径需要加一个前缀，用于nginx的路由转发：

import axios from "axios";
const request = axios.create({
    // baseURL: 'http://localhost:8086',  //  注意!!  这里是全局统一加上了  '/api'  前缀,也就是说所有的接口都会加上'/api'前缀名
    // timeout: 5000
    //利用nignx解决跨域问题
    baseURL: '/api',  //  注意!!  这里是全局统一加上了  '/api'  前缀,也就是说所有的接口都会加上'/api'前缀名
    timeout: 5000
})
export default request;

（3）第三点需要改一下路径地址，配置路由和组件之间的关系，配置成Hash路由模式。