vue+axios给开发环境和生产环境配置不同的接口地址

shadowbook 发布于2019-08-26 10:48 / 2889人阅读

摘要：为什么要配置不同的接口地址在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域因为端口不一样，所以在文件中配置了代理检查某个文件是否存在如果可以执行到这里那么就表示存在了捕获异常然后再文件夹里建立对应的项目名文件，被请求的地

1、为什么要配置不同的接口地址
在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理

//检查某个文件是否存在
try {
  fs.statSync(path.join(__dirname, "../proxy/" + templatedir + ".json"))
  //如果可以执行到这里那么就表示存在了
  console.log(124)
  proxyTable = require("../proxy/" + templatedir + ".json")
} catch (e) {
  //捕获异常"
}
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: proxyTable,

    // Various Dev Server settings
    host: "localhost", // can be overwritten by process.env.HOST
    index: templatedir,
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

然后再proxy文件夹里建立对应的项目名.json文件，

{
  "/": {
    "target": "", // 被请求的地址
    "changeOrigin": true,
    "pathRewrite": {
      "^/": "/"
    }
  }
}

注意：proxyTanle这个插件只限于开发模式下，后面一定要将前端代码和服务器代码部署在一起，负责需要通过Nginx进行跨域的转发配置。

专线服务私有云 java开发环境的配置给云服务器ecs配置环境 linux系统如何配置java系统的开发环境开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106804.html

vue开发环境配置跨域，一步到位

摘要：本文要实现的是使用搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问阅读时间需要三分钟产品生产环境开发开发环境开发环境设置跨域使用工具自带的配置配置目录自行复制黏贴后台是否跨域需要的注意以上配置只有在生产环境下有效，你打本文要实现的是：使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问阅读时间需要三分钟 production：产品 ...

shmily 2019-08-23 14:44 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0
前端面试汇总VUE(一）

摘要：因为对用的比较多，所以面试投的都是相关的岗位，下面是在面试中遇到的常见的问题。这样前端请求就可以使用接口名称，但是在生产环境下，我们不需要接口请求前面加，所以就需要判断开发环境和生产环境。的核心存放数据变更状态同步的调用，更改状态的。因为对vue用的比较多，所以面试投的都是vue相关的岗位，下面是在面试中遇到的常见的vue问题。 1.Vue 不同环境配置不同的接口地址；我们在项目中...

phodal 2019-08-23 18:28 评论0 收藏0
从0到1使用VUE-CLI3开发实战（四）: Axios封装

摘要：从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用，于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从0到1使用VUE-CLI3开发实战（四）: Axios封装有很多同学看了本系列的前几篇之后建议我暂时先不用TS，于是小肆之后将把TS换成JS继续下面的文章。今天给大家带来项目中非常...

ThinkSNS 2019-08-23 14:57 评论0 收藏0
基于vue-cli3.0构建功能完善的移动端架子

摘要：对应每一个环境可能都会有所差异，比如说服务器地址接口地址地址等等。具体的值取决于应用运行的模式。会和中的选项相符，即你的应用会部署到的基础路径。基于vue-cli3.0构建功能完善的移动端架子，主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域设置 eslint设置...

Loong_T 2019-08-23 17:05 评论0 收藏0