VueCLI3打包部署与Nginx反向代理解决跨域实战

本文档主要介绍了如何将Vue CLI 3构建的项目部署到Nginx服务器，并解决跨域问题。在Vue CLI 3版本更新后，传统的`build`和`config`文件夹结构有所改变，大部分配置迁移到了`.vue.config.js`文件中。以下是关键步骤： 1. **Vue CLI 3打包配置**: - 在`.vue.config.js`中，通过`devServer.proxy`属性处理开发环境的跨域问题。例如，配置一个名为`/proxy`的代理，将所有以`/proxy`开头的请求转发到本地`http://127.0.0.1:8100`，同时启用`changeOrigin`选项以处理跨源请求，并使用`pathRewrite`规则去掉`/proxy`前缀。 - 使用`Vue.http`进行API请求时，需要正确拼接代理路径，如`Vue.http.post(`/proxy/login/auth`).then()`。 2. **打包与部署** - 使用`npm run build`命令对Vue应用进行生产环境构建。 - 构建完成后，可能会遇到跨域问题，因为静态资源不再由Nginx的CORS策略管理。 3. **Nginx反向代理设置** - 安装并配置Nginx，从官方网站下载并解压到指定位置，注意设置好监听端口（如8085）。 - 打开`nginx.conf`，创建一个新的`server`块，配置如下： - `listen 8085;`: 设置监听端口。 - `server_name localhost;`: 指定代理服务地址。 - 添加CORS头部信息，如`Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials`等，允许所有来源的请求，并支持各种HTTP方法。 - `location /`部分配置为项目的静态资源根目录，并开启目录浏览功能。 4. **配置反向代理** - 对于API请求的URL（例如`/pr`），在Nginx的`location`块中设置代理目标和转发规则，确保浏览器可以正确访问到后端接口。 本文提供了从Vue CLI 3项目打包到部署到Nginx服务器，并解决跨域问题的详细流程，包括配置文件更改、打包过程以及Nginx的反向代理设置。理解并按照这些步骤操作，可以帮助开发者顺利完成Vue应用的部署。