vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例
使用.env加后缀的方式来建立某个模式下的环境变量,
例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境):
.env.development .env.production
在新建的两个环境变量文件中设置相同的环境变量名:
VUE_APP_BASE_API
环境变量名称必须以"VUE_API_"+名称的格式,否则不生效,这个格式是死的。至于后面部分就是自定义部分。
重点来了,我们为什么要建立这两个环境变量的文件,那是因为能解决我们在开发的时候来回改动服务器的困扰,有了这两个环境变量文件,当运行(npm run serve)的时候自动调取开发环境的变量,当打包(npm run build)的时候就会调取生产环境的变量,这样一来总是改动了,即使以后更换了服务器,只要在这两个地方修改即可。
.env.development文件命令:
#接口服务地址
VUE_APP_SERVICE_URL='http://localhost:8001/'
#开发环境路径前缀
VUE_APP_BASE_API='/dev-apis'
.env.production文件命令:
#生成环境路径前缀
VUE_APP_BASE_API='/prod-apis'
vue.config.js文件命令调用环境变量:
环境变量的获取使用"process.env."+环境变量名称的方式,例如:
process.env.VUE_APP_BASE_API
一下是完整设置
module.exports={
devServer:{
port:8888,//前端端口
open:true,//运行后浏览器自动弹出
https:false,//不采用https加密方式
host:"localhost",//前端主机,也可以是127.0.0.1,如果能被外界访问可以设置为0.0.0.0
proxy:{
[process.env.VUE_APP_BASE_API]:{//环境变量
target:process.env.VUE_APP_SERVICE_URL,//后端服务器,即:API服务器
changeOrigin:true,//是否允许跨域
pathRewrite:{//请求路径重写
['^'+process.env.VUE_APP_BASE_API]:''//匹配开头为环境变量值的字符串,后面设置空字符串。
}
}
}
},
lintOnSave:false, //关闭格式检查
productionSourceMap:false //在生产环境中不生成source map文件,可以减少编译后代码的体积
}
vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例的更多相关文章
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Vue全家桶高仿小米商城
大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
随机推荐
- Web For Pentester - SQL injections/Directory traversal
SQL injections Example 1 典型的SQL注入 name=root' or 1=1 %23 直接执行就可以导出所有用户 查看后端的源码 观察到,我们传入入的name中,传入就成为了 ...
- 换个脑袋,做个小练习------四则运算系统的随机出题的jsp实现
四则运算出题系统网页界面的实现(别期待,只有俩操作数) index.jsp <%@ page contentType="text/html;charset=UTF-8" la ...
- [WinUI 3] 如何利用D3D11在SwapChainPanel控件上绘制OpenGL(Uwp通用)
预览 技术实现 看过我上篇在 WPF 中实现 OpenGL 与 D3D 渲染的同学应该知道,我是依靠 WGL 中 WGL_NV_DX_interop 扩展与 D3D Surface 关联并在使用该 S ...
- Mathematica的Combinatorica`程序包使用笔记
目录 官方给出的程序包使用指南和一些示例 引论 步骤 0x00 导入程序包 0x01 Integer Partitions 0x02 Integer Compositions 0x03 partiti ...
- 学习笔记if
- 【ACM算法竞赛日常训练】DAY2题解与分析【比赛】【数学考试】【简单瞎搞题】
DAY2共三题: 比赛(概率) 数学考试(前缀和与思维) 简单瞎搞题(dp) 视频讲解:https://www.bilibili.com/video/BV1hP411o7RD/ 作者:Eriktse ...
- Go语言:一文看懂什么是DI依赖注入(dependency injection)设计模式
前言: 本文主要介绍的是Goalng中关于 DI 的部分,前一部分会先通过典型的面向对象语言Java引入DI这个概念 仅供初学者理解使用,文章如有纰漏敬请指出 本文涉及到的知识面较为零散,其中包含面向 ...
- 万字血书React—走近React
配置开发环境 脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...
- Vue指令:内置指令和自定义指令
Vue指令 Vue指令指的是,以v-开头的一组特殊语法 内置指令 v-text v-text指令的作用是:设置标签的内容 默认写法会替换全部内容,差值表达式{{ }}只会替换指定内容 内部支持写表达式 ...
- 使用vSphere Update Manager 升级 ESXi 主机
使用vSphere Update Manager 升级 ESXi 主机 vSphere Update Manager vSphere Update Manager 是用于升级.迁移.更新和修补群集主 ...