如何将Vue项目打包部署到nginx并配置跨域设置？

本文共计840个文字，预计阅读时间需要4分钟。

众周知，我们在做前后端分离项目时，通常需要在本地启动前端工程，并通过接口拉取服务端的数据。然而，更常见的情况是直接访问远程接口，而非使用本地的mock数据。如果本地程序直接访问远程接口，可能会遇到跨域问题。

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口， 肯定会遇到跨域问题。

什么是跨域?实现跨域的多种方式?

这里我就不详细介绍了,大家自行百度哈

为什么要实现前端跨域

一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口

vue项目中的配置

以vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 由于我们是在 开发环境 下使用，自然而然是要配置在dev里面,找到 proxyTable属性,配置如下:

dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', <!-- 使用proxyTable进行跨域设置 --> proxyTable: { '/api': { target: 'www.abc.com', // 设置你调用的接口域名和端口号, 别忘了加www.abc.com/user/add'，直接写'/api/user/add'即可' '^/api': '/' } } }, // Various Dev Server settings host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true },

上面proxyTable属性中的配置,效果就是将本地8080端口的一个请求代理到了www.abc.com这个域名下

'localhost:8080/api' ===> 'www.abc.com/'

注意: 以上设置只能在开发环境下使用,打包后会出现路径问题的 注意: Vue-cli提供的代理功能，只是让你在开发环境下使用的，它(localhost:4000/;}

你要访问那个地址这里就修改为你要访问的那个地址复制代码

以上配置就全部完成啦

注意: 修改完nginx中的配置一定要重启nginx才可以, 切记!!!

nginx简单的操作命令

nginx.exe -s stop // stop是快速停止nginx，可能并不保存相关信息 nginx.exe -s quit // quit是完整有序的停止nginx，并保存相关信息 nginx.exe -s reload // 当配置信息修改，需要重新载入这些配置时使用此命令 nginx.exe -s reopen // 重新打开日志文件 nginx -v // 查看Nginx版本

以上就是我在项目中使用的配置啦,还有一些更高级的配置还没有接触使用到,供大家参考

总结

以上所述是小编给大家介绍的Vue中跨域及打包部署到nginx跨域设置方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！