Vue项目部署公网ip和端口以及使用域名访问配置

在Vue.js项目中，通常前端并不直接配置后端接口的IP和端口，因为这是后端服务器的事情。但是，为了方便开发者本地开发时也能访问到远程API，可以采取一些策略：

1. 使用环境变量：创建一个`.env`文件（对于Vue CLI项目），或者在项目的其他环境配置文件中（如`.env.development`或`.env.production`），定义一个环境变量，比如`API_HOST=localhost:8080`。然后在你的Vue代码里通过`process.env.VUE_APP_API_HOST`来读取这个值。 ```js // .env.development API_HOST=http://localhost:3000 // 或者，在JavaScript中使用 const apiUrl = process.env.API_HOST || 'http://localhost:3000'; ``` 2. 修改axios或fetch配置：如果你使用了axios库发送HTTP请求，可以在创建axios实例时设置baseURL，或者在每个请求前动态设置： ```js import axios from 'axios'; // 创建axios实例并设置基础URL axios.defaults.baseURL = process.env.API_HOST; // 或者每次请求时动态设置 axios.get(`${process.env.API_HOST}/api/endpoint`) ``` 3. 使用proxyTable：在Vue CLI的`vue.config.js`文件中，你可以配置`devServer.proxy`属性来转发所有对`/api`路径的请求到指定的后端地址： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://your-deploy-ip:your-port', changeOrigin: true, }, }, }, }; ```