相关动态
Vue项目部署公网ip和端口以及使用域名访问配置
2024-11-11 03:03
Vue.js项目中,通常前端并不直接配置后端接口IP端口,因为这是后端服务器的事情。但是,为了方便开发者本地开发也能访问到远程API,可以采取一些策略:

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

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, }, }, }, }; ```
    以上就是本篇文章【Vue项目部署公网ip和端口以及使用域名访问配置】的全部内容了,欢迎阅览 ! 文章地址:http://fswenzheng.xhstdz.com/quote/80328.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://fswenzheng.xhstdz.com/mobile/ , 查看更多   
发表评论
0评