首页 > 其他分享 >vue3配置使用环境变量.env.development

vue3配置使用环境变量.env.development

时间:2024-04-03 17:26:55浏览次数:273  
标签:development -- build env vue3 vite mode

参考:https://blog.csdn.net/perfect2011/article/details/129930819
1.新建环境配置文件,根目录
.env 基础系统变量,无论何种环境,都可使用其中配置的值,其他环境中的变量会覆盖.env中的同名变量。
.env.development 开发环境
.env.production 生产环境
.env.staging 测试环境

2.vue3使用vite进行编译,所以变量都要以 VITE_ 开头,例如.env.development中
# 开发环境变量
NODE_ENV = 'development'
VITE_TITLE = '开发环境Title'

3.使用多环境配置,package.json文件

"scripts": {
    "dev": "vite --mode development",
    "stage": "vite --mode staging",
    "prod": "vite --mode production",
    "preview": "vite preview",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:stage": "vite build --mode staging"
  },


4.使用环境变量 import.meta.env.VITE_TITLE
当使用 cnpm run dev 的时候,这个值就是 开发环境Title
cnpm run stage 就是 测试环境Title
cnpm run build 默认就是生产环境
如果编译工具是webpack,那就是用process.env.VITE_TITLE

标签:development,--,build,env,vue3,vite,mode
From: https://www.cnblogs.com/xsj1989/p/18113120

相关文章

  • 重读vue3
    基础风格指南结构风格vue推荐:先声明,后使用<scriptsetup></script><template></template><stylescoped></style>子组件命名<!--在单文件组件中,推荐为子组件使用PascalCase的标签名,以此来和原生的HTML元素作区分--><!--✅:推荐风格:PascalCase,文件名使用keba......
  • vue3 手机端 手写签字
    <template><div><div><canvasclass="canvas"id="canvas"ref="canvas"></canvas><canvasid="blank"style="display:none"></canvas><p......
  • vue3 快速入门系列 —— 基础
    vue3快速入门系列-基础前面我们已经用vue2和react做过开发了。从vue2升级到vue3成本较大,特别是较大的项目。所以许多公司对旧项目继续使用vue2,新项目则使用vue3。有些UI框架,比如antdesignvue1.x使用的vue2。但现在antdesignvue4.x都是基于vue3,示例默认是......
  • Vite创建Vue3项目
    一、简介    Vite:一款前端构建工具。    官网地址:https://cn.vitejs.dev二、依赖    1、Node.js。下载和安装环境略过。三、基于Vite创建Vue3项目    3.1、创建vite    npmcreatevite@latest        之后跟随引导,......
  • vue3
    [slot插槽]官方文档[slot有什么用?]为了复用,在开发过程中,会产生很多组件,组装这些组件会形成一个树形结构。如果组件嵌套层数过多,过于零碎,不利于开发和维护。slot插槽的作用,就是讲组装过程扁平化,比如有三级组件,正常需要在一级组件中嵌入二级组件,在二级组件中嵌入三......
  • 从零实现vue3核心源码 day1
    1.声明式框架Vue3依旧是声明式的框架,用起来简单。命令式和声明式区别早在JQ的时代编写的代码都是命令式的,命令式框架重要特点就是关注过程声明式框架更加关注结果。命令式的代码封装到了vue.js中,过程靠vue.js来实现声明式代码更加简单,不需要关注实现,按照要求填代码就可......
  • Java登陆第三十六天——VUE3响应式入门、setup语法糖
    当浏览器接收到服务端返回的页面后,浏览器会把页面解析成DOM树,DOM树中各个元素会相应的显示在浏览器上。VUE提供的响应式数据可以在页面不刷新的情况下更新数据。响应式数据App.vue<script>//等价于setup语法糖。固定的写法,不会改。exportdefault{setup(){letsum......
  • Mybatis流程分享-II 配置处理,构建environment 信息
    序言通过章节一的讨论,我们知道Mybatis内部对于xml的解析过程具体如下:可以看到,在配置文件的解析过程中其会首先调用SqlSessionFactortyBuilder中的build方法,接着再调用XMLConfigBuilder的parse()方法,并最终返回一个Configuraion对象。进一步,又会调用SqlSessionFactortyBuilde......
  • Java登陆第三十六天——VUE3引入CSS
    在一个.Vue文件中,通常包括以下三部分。<template><style><script>.vue中部分传统部分描述<template>HTML代替传统的.html文件<style>CSS代替传统的.js文件<script>JS代替传统的.css文件声明内部的CSS在.Vue文件中,style标签声明CSS。Hello......
  • Vue3初识
    Vue3初识vue.js是什么vue是什么?官网首页就有答案:渐进式JavaScript框架。有灵活,易用,高效的特点。官网首页有详细的介绍:v2:https://cn.vuejs.org/v2/guide/V3:https://vuejs.org/V3中文:https://cn.vuejs.org/V3中文2:https://staging-cn.vuejs.org/如何理解渐进式个......