vue中vite.config.js配置跨域以及环境配置详解

这篇具有很好参考价值的文章主要介绍了vue中vite.config.js配置跨域以及环境配置详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

如何配置跨域,代理域名,下面是vite的代理

server: {
      port: 8516,
      host: true,
      open: true,
      proxy: {
        '/license-province': {
          target: 'http://xxx.xxx.x.xxx:xxxx',
          changeOrigin: true,//是否跨域
          rewrite: (p) => p.replace(/^\/license-province/, 'license-province')//重写路径
        }
      }
    },

区分开发环境和生产环境,以及预发布环境

在根目录创建 .env[mode]文件,在项目执行 npm run dev 的时候vite会自动去读取 .env.development 文件里面的配置,执行 npm run build 进行打包之后也会自动将 .env.production 的内容打包进去.
注意: 如果你想进入预发布模式的话需要在打包的时候进行mode配置: npm run build --mode staging
公共的: .env
开发环境: .env.development
生产环境: .env.production
预发布环境: .env.staging
vite跨域配置,前端开发,javascript,前端,vue.js,javascript,Powered by 金山文档

我们的 .env.development 和 .env.production 文件里面都会有 VITE_APP_ENV 配置:

vite跨域配置,前端开发,javascript,前端,vue.js,javascript,Powered by 金山文档
vite跨域配置,前端开发,javascript,前端,vue.js,javascript,Powered by 金山文档

在我们的 vite.config.js文件中:

vite跨域配置,前端开发,javascript,前端,vue.js,javascript,Powered by 金山文档

以上是 vite.config.js 的配置,上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域.

VUE中常用proxy来解决跨域问题

1.在vue.config.js中设置一下代码:
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 配置跨域
    '/api':{
        target:`http://xxx.xxx.xxx`, //请求后台接口
        changeOrigin:true, // 允许跨域
        pathRewrite:{
            '^/api' : '' // 重写请求
        }
    }
  },
}

2. 创建axioss实例时,将baseUrl设置为 '/api'文章来源地址https://www.toymoban.com/news/detail-558220.html

const http = axios.create({
  timeout: 1000 * 1000000,
  withCredentials: true,
  BASE_URL: '/api'
  headers: {
     'Content-Type': 'application/json; charset=utf-8'
   }
})

到了这里,关于vue中vite.config.js配置跨域以及环境配置详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue.config.js 跨域配置

    一般是配置 .env .env.production 等。 默认配置就是用 .env 示例: 为啥要封装,因为开发模式需要proxy代理。。而线上模式不需要。 /dev-api 只要不和web里的path 冲突就行,也可以取其他名字。 开发模式 就是web的路径,再加个特殊的path 用作代理。 其他模式 不需要proxy配置,直接走

    2024年02月11日
    浏览(45)
  • Vue+vite创建项目关于vite.config.js文件的配置

    Vue项目创建时,我们见过vue-cli 创建项目和webpack 创建项目等方式。 现在Vue 3版本使用npm/pnpm create vue@latest 创建项目,是搭配使用vite工具构建的。 创建完成的项目,最明显的去别就是,项目配置文件命名不同,当然,配置语法也有不同。 vue-cli 创建的项目,项目配置文件文件

    2024年02月12日
    浏览(56)
  • vue2的vue.config.js中简单配置代理跨域

    调用后端接口访问后台数据,但是因为请求url的协议、域名、端口三者之间任意一个与当前页面url不同产生了跨域,我们vue项目运行的地址一般就是localhost 8080端口,而且后端也没有配置允许跨域(后端如果配置跨域通常是cors),所以前端就要配置跨域,Vue跨域在vue.config.j

    2024年02月15日
    浏览(39)
  • Vite 配置代理 Proxy,Vue配置代理,解决前端跨域

    我们在做项目的时候经常会遇到跨域的问题,之所以会出现跨域问题是因为浏览器的同源策略,即协议、域名、端口需要一致,才可以访问服务端的资源。当一个请求地址(服务端的地址)的协议、域名、端口三者之间任意一个与当前页面地址(前端页面地址)不同即为跨域

    2024年02月17日
    浏览(53)
  • UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

    UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代理。 二选一即可。 修改或调整配置文件后,推荐重新运行,以防不生效。 配置完成后,请求接口

    2024年01月16日
    浏览(46)
  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(80)
  • vue3 vite配置跨域以及不生效问题

    1. 在vite.config中添加配置 2. 在.env.development中配置开发环境下的基地址(没有该文件夹手动新建) 3. 配置axios的基地址 最后:         我之前是犯过一个错误的, 导致我搞了半天都没搞好... 就是配置完vite.config, 那个/ccc后缀是接口没有的自己加的, 那么就要手动加上去了...     

    2024年02月11日
    浏览(43)
  • IIS部署vue前端过程(含IIS及相关配置和安装),部署遇到的问题及报错(承接vueconfig.js全局配置环境变量,跨域问题)

    目录 一.IIS使用安装。 二.部署准备工作 三.部署前端(以vue为主) 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址) 3.地址显示undefined 第一步,打开“ 控制面板 ”,点击“ 网络和Internet ”。 第二步,点击左侧“ 程序 ”,然后点击

    2024年02月08日
    浏览(65)
  • 记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

    前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。 处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。 1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios 2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置

    2024年02月01日
    浏览(57)
  • vue.config.js配置详解

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。 以下是 vue.config.js 的一个基本配置: 这里只是列出

    2024年02月15日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包