生产环境和开发环境

最新推荐文章于 2024-05-09 18:58:22 发布
最新推荐文章于 2024-05-09 18:58:22 发布
阅读量725 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zengxingx/article/details/121309046
版权

开发环境：

        development

  • 在跟目录创建一个文件.env.development
  • 在文件中设置相应环境的变量
    • 接口基地址：VUE_APP_开头
      • VUE_APP_URL=“开发环境接口基地址”

生产环境：

        production

  • 在根目录中创建一个文件.env.production
  • 在文件中设置相应环境变量
    • 接口基地址:VUE_APP_开头
    • VUE_APP_URL=“开发环境接口基地址”

使用：process.env.VUE_APP_URL可以拿到定义的值

yarn serve 开发    process.env.VUE_APP_URL===aaa

yarn build   生产    process.env.VUE_APP_URL===bbb

zengxingX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django 开发环境与生产环境的区分详解
12-25
Django 开发环境与生产环境的设置 在常规的Django工程开发中，我们经常会遇到一类问题，即：本地开发环境跟远程服务器生产环境配置不一样。对于这些不同之处，以前的做法是直接修改生产环境中的配置。但是对于立志...
vue项目在开发环境和生产环境接口地址配置简记
qq_28458369的博客
04-25 5721
开发环境 在开发环境中，由于前后台并不是放在同一个服务器中的，所以这个时候就需要配置代理，打开vue项目的config/index.js文件，找到dev对象里的proxyTable配置如下： dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // 配置后台通信 ...
vue项目配置生产、测试和开发环境
weixin_43930421的博客
05-28 4647
目前的 web 项目开发基本都是基于前后端分离的模式。 在实际的开发过程中，从开发到测试完成、发布到线上所调用到的接口地址可能都不一样，那就需要在项目中分别配置各个环境的接口地址（或者域名，也可以定义不同环境下的不同变量）。 首先，在项目根目录下新建3个文件 .env 、.env.test、 .env.production 第二步，编辑文件 .env（开发环境） NODE_ENV=development VUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名
vue设置axios请求接口基址和代理接口地址
热门推荐
weixin_43901550的博客
06-28 1万+
适用于vue-cli3以上版本搭建的项目 一、接口基址（单个接口地址） 如果你的项目只有一个服务器访问地址（接口地址），不调用别的接口地址的话可以直接在src下的main.js中设置axios的默认基址 //main.js中 import axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL='http://localhost:3000';//设置基址 二、代理接口地址 如果你的项目需要访问多个地址，即调用多个不同的接
node+express模拟数据(二)——配置axios请求拦截和响应拦截 & 配置跨域
weixin_44867717的博客
04-28 706
node+express模拟数据(二)——配置axios请求拦截和响应拦截 & 配置跨域 1、配置axios请求拦截和响应拦截 第一步：在main.js中 import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' import router from './router' import stor
webpack开发环境和生产环境切换原理.docx
07-14
webpack开发环境和生产环境切换原理.docx
webpack开发环境和生产环境的深入理解
10-17
webpack练习
详解vue+axios给开发环境和生产环境配置不同的接口地址
12-02
在开发过程中，前端请求访问的是自己本机启动的后台服务，此时涉及到跨域（因为端口不一样），所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/...
Api接口文档的一些知识点
寂寥人生
07-25 1753
才开始学习前后端分离项目,vue项目直接访问的api来对接服务器,我们先来看一下接口文档的说明 总结: 接口基准地址就是以后不管你访问那个接口,都是从这个地址上开始加参数的,比如这个用户管理 我们只需要在基准地址后面加上路径和参数即可请求出数据 接着认识一下什么叫做统一使用token认证? 就比如你浏览一个需要登录之后才能查看的页面,我们需要一个cookie值来判断你是否存在,存在即你已经登录了...
前后端分离，如何在前端项目中动态插入后端API基地址？
程序IT圈
06-09 1060
本文分享前后端分离，容器化前端项目时动态插入后端API基地址，这是一个很赞的实践，解决了前端项目容器化过程中受制后端调用的尴尬。尴尬从何而来常见的web前后端分离：前后端分开部署，前端项...
vue2项目有多个接口请求基路径url地址的配置方式
全易
08-15 9330
config/index.js文件：
vue-cli3.0 根据环境自动获取相应接口地址
cR。的博客
03-13 1461
在项目根目录创建config文件夹，然后创建2个文件 pro.env.js: module.exports = { NODE_ENV: '"production"', // 生产环境 API_ROOT: '""' // 填上自己的接口的网址 } dev.env.js: module.exports = { NODE_ENV: '"development"', // 开发...
Vue自动判断开发环境与生产环境的接口地址
尘生杜若
05-08 4839
在开发项目时请求数据经常会遇到跨域问题，还好使用vue配置反向代理还是很简单好用的，但是在项目要进行打包上线时会遇到一个问题，反向代理只适用于开发环境下，生产环境是不支持的，也就是说如果不对接口进行处理的话是会报错的，那么我们应该如何解决这个问题呢？ 一.config文件夹下dev.env.js中 开发环境下使用了反向代理解决跨域问题 module.exports = merge(prodEnv,...
vue中的.env | .env.development | .env.production区别
HD243608836的博客
01-12 3144
.env——全局默认配置文件，无论什么环境都会加载合并 .env.development——开发环境下的配置文件 .env.production——生产环境下的配置文件 注意：属性名必须以VUE_APP_开头，比如VUE_APP_xxx = "变量" 文件是如何加载的？ 　　执行启动命令后会自动加载对应的环境，vue是根据文件名进行加载的，所以不要乱起名字，也不用专门控制加载哪个文件。 　　如执行npm run serve，会自动加载.env.development文件。 ...
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
徐同保的专栏
05-09 261
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 486
注释很详细，直接上代码……
Vue 传送门
最新发布
征战无悔人生
05-09 149
vue 传送门
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 376
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue生产环境和开发环境配置
07-27
在Vue中，配置生产环境和开发环境的方法如下： 1. 开发环境配置： 在开发环境中，你可以使用Vue CLI提供的一些默认配置来方便地进行开发。你可以使用`vue create`命令创建一个新的Vue项目，然后在项目根目录下找到`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值