首页 > 其他分享 >VUE配置proxy代理、开发环境、测试环境、生产环境

VUE配置proxy代理、开发环境、测试环境、生产环境

时间:2024-04-25 16:22:43浏览次数:27  
标签:API VUE APP 环境 BASE proxy env 测试环境

1、根目录下新建三个环境的配置文件,.env.development(开发环境).env.test(测试环境).evn.production(生产环境)
开发环境
NODE_ENV = 'development'

开发环境,api前缀

VUE_APP_BASE_API = '/api'

开发环境,Url地址

VUE_APP_BASE_RUL = 'http://xxxxxxxxxxxxx:8081/****

生产环境

NODE_ENV = 'production'

生产环境,api前缀

VUE_APP_BASE_API = '/prod-api'

生产环境,Url地址

VUE_APP_BASE_RUL = 'http://xxxxxxxxxx:8081/'

2 // webpack-dev-server 相关配置
devServer: { // 设置代理
host: '0.0.0.0', //
port: 80, //自定义端口
https: false, //false关闭https,true为开启
open: true, //自动打开浏览器
proxy: {
[process.env.VUE_APP_BASE_API]: { //同济医院地址
target: process.env.VUE_APP_BASE_RUL,
// 如果要代理 websockets
ws: true,
changeOrigin: true,
pathRewrite: { //重写路径,这种是没有我们定义的前缀
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},

3 、axios 配置baseURL
baseURL: process.env.VUE_APP_BASE_API

参考文献 https://www.cnblogs.com/fenle/p/16193779.html
https://blog.csdn.net/coinisi_li/article/details/128547778

标签:API,VUE,APP,环境,BASE,proxy,env,测试环境
From: https://www.cnblogs.com/zw100655/p/18157955

相关文章

  • 20.vue-组件传参(父传子,子传父)
    父传子:父组件向子组件传入一个参数,可以通过 props配置项,让组件接收外部传过来的数据1)传递数据这里需要注意,通过age="18"的方式,传递进去的数据是字符类型的,通过动态绑定:age="26"的方式,传递进去的数据是整型类型<!--这里需要注意,:age="26"代表v-bind动态绑定,传入的a......
  • vue 自动导入unplugin-auto-import
     vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦,可以通过unplugin-auto-import给我们自动引入1、安装npmi-Dunplugin-auto-import2、在vite.config.ts中引入importAutoImportfrom'unplugin-auto-import/vite'并在plugins中配置:exportdefaultdef......
  • 如何查看Vue CLI中webpack的默认配置
    这里使用terser-webpack-plugin举例说明,在VueCLI项目中,terser-webpack-plugin 插件的默认配置通常是隐藏且封装的,因为VueCLI会根据项目需求自动配置webpack。如果你想查看terser-webpack-plugin的默认配置,你可以尝试以下方法:通过检查node_modules/terser-webpack-plugin/di......
  • Vue3 简单登录管理页面Demo
    目录前言项目基础配置新建项目引入组件项目配置Vue项目配置项目基本结构基础页面布局和路由搭建新增页面,简单跳转LoginViewMainViewrouterApp嵌套路由Test[1-4]Layout.vuerouter给个简单的跳转路由守护,重定向,动态路由,路由传值。这里不做展开描述简单登录页面:烂尾了总结前言这里......
  • 汉得PI&PO教材-Adapter使用-实例4 proxy2proxy V1.0
    汉得PI&PO教材系列   Adapter使用-实例4:proxy2proxy         仅限汉得内部使用 作者:徐伟版本:1.0日期:2017-02-28图标 图标含义 警告 示例 注释 建议 语法 外部处......
  • 汉得PI&PO教材-Adapter使用-实例6 proxy2jdbc(异步)V1.0
    汉得PI&PO教材系列   汉得PI&PO教材-Adapter使用-实例6proxy2jdbc(异步)         仅限汉得内部使用 作者:汉得顾问版本:1.0日期:2017-02-01图标 图标含义 警告 示例 注释 建议......
  • vue3 使用vant4中的List分页加载时,会回滚到页面顶部
    问题项目中使用vue3+vant4,列表页使用了List来做列表加载,代码如下:<van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><divv-if="list&&list.length"class=......
  • Vue3——tdesign-vue-next如何按需加载动态渲染ICON
    前言如题,在vue3中进行按需加载来动态的渲染icon图标;在线案例:https://stackblitz.com/edit/9ufmeo?file=src%2Fdemo.vue内容<template><t-spacedirection="vertical"><t-spacebreak-linev-for="(item,index)iniconList":key="index"&......
  • vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
    Hello,大家好,我是小编鹏仔,鹏仔一直觉得VUE在H5端路由跳转时交互特别丑,一直想写成那种点击滑动切换类的效果,趁着这两天工作不是很忙就网上搜了下,最终在多个搜索结果中选择了一种方式实现,效果如下图所示,点击路由跳转时是页面是滑动切换。逻辑其实还是很简单的,就是监听在路由切换时加......
  • vue启动本地服务不显示network访问链接
    在vue.config.js(或者配置config了的,就在config下的index.js)文件下设置devServer或者dev中的public属性值,需要修改为自己电脑的IPV4地址,获取IPV4地址方法,Win+R打开运行窗口,输入cmd,在命令行输入ipconfig回车后会出现一串信息,复制IPV4地址即可;module.exports={......