vue3+vite中开发环境与生产环境全局变量配置指南

目录
  • 一、开发环境和生产环境
  • 二、配置环境变量
  • 三、使用全局变量
  • 总结

一、开发环境和生产环境

开发环境：也就是编码时运行的环境，即我们使用npm run dev或者npm run serve运行项目到本地时，项目处于的环境。

生产环境：项目部署到服务器上后处于的环境，我们使用npm run build将项目打包以后，再运行项目，项目就运行在生产环境中了。

对于不同的环境，我们可以配置不同的环境变量，来实现开发和生产的兼容。

例如：

开发环境时，我们可以请求自己本地的接口（‘/api’ proxy代理）。

而部署到服务器上后，应该请求服务器提供的接口（‘http://xxxxxx/api/’ 真实接口）。

我们通过设置axios的baseUrl可以实现，但是需要区分开发环境和生产环境，从而改变baseUrl。

二、配置环境变量

在项目根目录下（与package.json同级）新建两个配置文件：

.env.development：开发环境下的配置文件,执行npm run dev命令，会自动加载.env.development文件.

.env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件

.env.development文件：

ENV = 'development'

VITE_BASE_URL='/api'

.env.production

ENV = 'production'

VITE_BASE_URL = 'http://xxxxxx/api/'

这里的VITE_BASE_URL是项目上线后需要请求的服务器接口。

三、使用全局变量

与vue-cli引用不同，vue-cli引用为：

process.env.变量名

而vite引用为:

import.meta.env.变量名

在配置axios时使用全局baseUrl:

const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,
    timeout: 5000
})

总结

到此这篇关于vue3+vite中开发环境与生产环境全局变量配置的文章就介绍到这了,更多相关vue3 vite全局变量配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3中如何实现定义全局变量

    目录 vue3定义全局变量 vue3全局变量app.config.globalProperties的使用 globalProperties vue3定义全局变量 在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量. 但是在vue3中,这种方法显然不行了.因为vue3中在setup里面我们是无法获取到this的,因此按照官方文档我们使用下面方法来定义全局变量: 首先在main.js里写一个我们要定义的全局变

  • vue3+vite中开发环境与生产环境全局变量配置指南

    vue3+vite中开发环境与生产环境全局变量配置指南

    目录 一.开发环境和生产环境 二.配置环境变量 三.使用全局变量 总结 一.开发环境和生产环境 开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境. 生产环境:项目部署到服务器上后处于的环境,我们使用npm run build将项目打包以后,再运行项目,项目就运行在生产环境中了. 对于不同的环境,我们可以配置不同的环境变量,来实现开发和生产的兼容. 例如: 开发环境时,我们可以请求自己本地的接口(‘/api’ prox

  • Django 开发环境与生产环境的区分详解

    Django 开发环境与生产环境的设置 在常规的Django工程开发中,我们经常会遇到一类问题,即:本地开发环境跟远程服务器生产环境配置不一样.对于这些不同之处,以前的做法是直接修改生产环境中的配置.但是对于立志自动化体系的开发者来说,显然这是极其愚蠢的. 那么常规的做法是什么呢?既然是不同的环境,两份不同的配置文件是必须的. 准备配置文件 在新建的Django项目中与settings.py同级目录下,准备两份不同的settings: |____EveryDay | |____prd_setti

  • webpack开发环境和生产环境的深入理解

    以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配置,在这里分享一下. 如何区分开发环境和生产环境? 众所周知,webpack时基于node.js平台运行的,要区分开发环境和生产环境还要存,node入手.我们启动webpack时,都需要输入一些命令,npm run .yarn start之类的,所以我们就从命令行入手,告诉webpack,当前是什么

  • vue3+vite中使用import.meta.glob的操作代码

    vue3+vite中使用import.meta.glob的操作代码

    目录 前言: vue3中使用 import.meta.glob 具体方法: 前言: 在vue2的时候,我们一般引入多个js或者其他文件,一般使用  require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个类似的功能,就是用import.meta.glob来引入多个,单个的文件. 这里说说他们的对比和区别: vue2 中使用  require 来引入多个不同的js文件 1.引入  modules 下的所有的js文件 const modulesFi

  • vue3+vite中使用vuex的具体步骤

    vue3+vite中使用vuex的具体步骤

    目录 前言: 具体步骤: 前言: 在vue3+vite创建的项目中使用vuex,要注意的是vite有部分写法和之前的webpack是不同的,比如,他不支持 require,想把vue2的项目直接升级到vue3的时候,需要改很多地方,如果非要使用vite也可以,记得改相关的内容. 具体步骤: 1.安装vuex( vue3建议 4.0+ ) pnpm i vuex -S 2.main.js中配置 import store from '@/store' // hx-app的全局配置 const app

  • MySQL中参数sql_safe_updates在生产环境的使用详解

    前言 在应用 BUG或者 DBA误操作的情况下,会发生对全表进行更新:update delete 的情况.MySQL提供 sql_safe_updates 来限制次操作. set sql_safe_updates = 1; 设置之后,会限制update delete 中不带 where 条件的SQL 执行,较严格.会对已有线上环境带来不利影响.对新系统.应用做严格审核,可以确保不会发生全表更新的问题. CREATE TABLE working.test01 (id INT NOT NULL AU

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

    为什么要配置不同的接口地址 在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + tem

  • RedHat环境下socks5代理的配置指南教程

    最近有不少网友老是问我一些QQ如何利用代理的事.其实是很简单的,通过代理猎手寻找一些socks5代理便可.刚好最近在学习linux系统,于是突然想到用RedHat9来做个socks5代理服务器.ok!说干就干. 1.先在北大天网搜索一下socks5的安装包,发现一大堆,最新版本是socks5-v1.0r11.tar.gz,于是下载到我的RH9的服务器上. 2.解压缩软件包 #tar xvfz socks5-v1.0r11.tar.gz 3.开始编译 #cd socks5-v1.0r11 #./c

  • 基于Vue生产环境部署详解

    前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署 生产环境 如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,

  • vue项目打包之开发环境和部署环境的实现

    项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口 手动改动接口,既繁琐又容易出错(当然,区别还不止这些) 优雅的解决方案是,分别使用两个入口文件,一个用于开发环境打包,一个用于生产环境打包 具体来说,分为下面几个步骤 1.创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js

随机推荐