vue cli 打包、生产环境 http-proxy-middleware 代理

Vue CLI 是 Vue.js 的官方命令行工具，它可以帮助我们快速创建和管理 Vue.js 项目。打包是 Vue CLI 的一个重要功能，我们可以通过运行 npm run build命令，将 Vue.js 项目打包成可以在生产环境中运行的静态文件。

在生产环境中，我们可能需要使用 http-proxy-middleware 来实现代理功能。代理是一种网络服务，它可以将客户端的请求转发到其他服务器，并将其他服务器的响应返回给客户端。http-proxy-middleware 是一个 Node.js 的中间件，它可以帮助我们在 Node.js 应用中实现代理功能。

在 Vue CLI 项目中，我们可以在 vue.config.js文件中配置 http-proxy-middleware。首先，我们需要安装 http-proxy-middleware，可以通过运行 npm install http-proxy-middleware --save命令来安装。然后，在 vue.config.js文件中，我们可以添加一个 devServer.proxy配置项，如下所示：

module.exports = {  devServer: {    proxy: {      '/api': {        target: 'http://localhost:3000',        changeOrigin: true,        pathRewrite: {          '^/api': ''        }      }    }  }}​

在上面的配置中，我们将所有以 /api开头的请求都代理到 http://localhost:3000这个地址。changeOrigin选项设置为 true，表示我们需要修改请求的 origin。pathRewrite选项用于重写请求的路径，我们将路径中的 /api替换为 ''。

然后，我们可以在 Vue.js 项目中使用 /api作为请求的基础路径，如下所示：

this.$http.get('/api/user').then(response => {  console.log(response.data)})​

当我们运行 Vue.js 项目时，上面的请求实际上会被代理到 http://localhost:3000/user。

需要注意的是，上面的配置只在开发环境中有效，因为在生产环境中，我们通常会将前端和后端的服务部署在同一个域名下，因此不需要进行代理。如果在生产环境中也需要进行代理，我们需要在生产环境的服务器上配置代理。

总的来说，Vue CLI 的打包和 http-proxy-middleware 代理是 Vue.js 项目开发和部署的重要步骤。通过合理的配置和使用，我们可以提高开发效率，同时确保项目在生产环境中的稳定运行。

蓝易云-五网CN2服务器【点我购买】蓝易云采用KVM高性能架构，稳定可靠，安全无忧！蓝易云服务器真实CN2回国线路，不伪造，只做高质量海外服务器。

海外免备案云服务器链接：www.tsyvps.com

蓝易云香港五网 CN2 GIA/GT 精品网络服务器。拒绝绕路，拒绝不稳定。