Vue (获取 .env.development的值)

最新推荐文章于 2024-07-05 02:47:57 发布
最新推荐文章于 2024-07-05 02:47:57 发布
阅读量6.6k 收藏
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41835813/article/details/107047094
版权

 取值：在vue的data里获取

api: process.env.VUE_APP_BASE_API

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  
  <div id="qyc">
	  {{message}}
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->
  <!-- 简单实例 -->
  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			message:'你好强月城'
		}
	  })
	  
  </script>
</html>

 

单向绑定   双向绑定

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	  <input type="text" v-bind:value="searchMap.keyWord"/>
	  <input type="text" v-model="searchMap.keyWord" />
	  <p>{{searchMap.keyWord}}</p>
  </div>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->

  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			searchMap:{
				keyWord:'强月城'
			}
		}
	  })
  </script>
  </body>
</html>

绑定事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	  <input type="text" v-model="result" />
	  <button v-on:click="showDate()">显示时间</button>
	  <!-- <button @click="showDate()">显示时间</button> -->
	  <p>{{message}}</p>
	  <p>{{result}}</p>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			message: '时间s',
			result: {}
		},
		methods:{
			showDate(){
				console.log("输出")
				this.result = this.message
			}
		}
	  })
  </script>
  </body>
</html>

提交submit

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	  <form action="" v-on:submit.prevent="sub()">
		  <input type="text" id="name" v-model="user.username" />
		  <button type="submit" >提交</button>
	  </form>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			user:{
				username:'强月城'
			}
		},
		methods:{
			sub(){
				if(this.user.username){
					console.log('提交')
				} else{
					alert('不能为空')
			}
		}
		}
	  })
  </script>
  </body>
</html>

判断

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	 <input type="checkbox" v-model="ok"/>是否同意
	 <p v-if="ok">同意</p>
	 <p v-else>不同意</p>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			ok:false
		}
	  })
  </script>
  </body>
</html>

循环

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	 <table>
		<tr v-for="user in userList">
			<td>{{user.id}}</td>
			<td>{{user.name}}</td>
			<td>{{user.age}}</td>
		</tr>
	 </table>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			userList:[
				{id:1,name:'a',age:11},
				{id:2,name:'b',age:22},
				{id:3,name:'c',age:33}
			]
		}
	  })
  </script>
  </body>
</html>

组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	<zuj></zuj>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",

		components:{
			'zuj':{
				template:'<ul><li>首页</li><li>管理</li></ul>'
			}
		}
	  })
  </script>
  </body>
</html>

全局

Vue.component('zuj',{
	template:'<ul><li>首页</li><li>管理</li></ul>'
})

axios

{
			"userList":[
				{"id":1,"name":"a","age":11},
				{"id":2,"name":"b","age":22},
				{"id":3,"name":"c","age":33}
			]
		}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	 <table>
		<tr v-for="user in userList">
			<td>{{user.id}}</td>
			<td>{{user.name}}</td>
			<td>{{user.age}}</td>
		</tr>
	 </table>
  </div>
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			userList:[]
		},
		created() {  //页面渲染前执行
			this.getUserList()
		},
		methods:{
			getUserList(){
				axios.get("userJson.json").then(response =>{
					console.log("读取成功"+response.data)
					this.userList = response.data.userList
				}).cache(error =>{
					alert("失败")
				})
			}
		}
	  })
  </script>
  </body>
</html>

 

Turing·
关注
专栏目录
vue项目使用.env文件配置全局环境变量的方法
10-16
然后，在Vue项目的某个JavaScript文件中，你可以通过process.env.VUE_APP_API_URL访问API的URL地址，通过process.env.VUE_APP_TITLE获取应用标题。 值得一提的是，这些环境变量在构建过程中会被静态嵌入到生成的包...
Vue中.env|.env.development|.env.production文件说明
热门推荐
Amelian的博客
04-17 3万+
0.介绍 模式是Vue CLI项目中一个重要的概念，默认情况下，一个Vue CLI项目有三种模式： developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service test:e2e 当运行vue-cli-service命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV变量，它的值取决
vue项目配置env
long321041080的博客
03-11 1682
vue+axios+env文件配置请求默认路径
vue3项目环境变量.env文件配置
最新发布
weixin_36366711的博客
07-05 2240
一、环境变量配置 官网https://cn.vitejs.dev/guide/env-and-mode.html#intellisense 1. 新建.env开头的文件在根目录 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码 .env 所有环境默认加载 ....
VUE3 vite获取.env.development配置环境
huanglgln的专栏
11-30 1万+
vue3无法获取.env.development问题
【Vue】vue | node | 获取配置文件的变量 | 获取VUE_APP_BASE_API | 获取.env.development变量
hgSuper的博客
08-17 2592
【Vue】vue | node | 获取配置文件的变量 | 获取VUE_APP_BASE_API | 获取.env.development变量
vue项目中的.env文件加载
u010640592的博客
03-08 1592
vue项目中的.env文件加载
Vue.js 3.0企业级管理后台源码（前端）
03-05
2. **.env.development** 和 **.env.production**：这些文件分别用于开发环境和生产环境的变量设置，比如API接口地址、数据库连接等。通过环境变量，我们可以轻松地在不同环境中切换配置，提高项目的可维护性。 3. ...
vue-adminTemplate.zip
06-02
首先，`.env.development`文件是开发环境下的环境变量配置，通常包括API接口地址、应用密钥等敏感信息，使得在开发过程中可以区分不同环境的设置。 `.editorconfig`文件是代码编辑器配置，用于保持不同开发人员之间...
深入浅析vue中cross-env的使用
12-03
"serve": "cross-env NODE_ENV=development vue-cli-service serve --open", "build": "cross-env NODE_ENV=production vue-cli-service build" } } ``` 上述配置中，`serve`脚本用于启动开发服务器，通过设置`...
【Vue3】 vite获取.env文件中配置的环境变量
余浩的博客
09-19 1万+
// 根据当前工作目录中的 `mode` 加载 .env 文件 // 第二个参数：process.cwd()表示返回运行当前脚本的工作目录的路径（current work directory） // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。 const env = loadEnv(mode.mode, process.cwd(), '');
vue3 如何获取env
seimeii的博客
07-28 4003
vue3 如何获取env
HTML读取本地文件信息的两种方式
kingdomwar的博客
04-10 3459
HTML读取本地媒体文件信息
vue3 .env 环境变量的配置及应用
这是个问题
11-18 3791
vue3 .env环境文件的配置与使用
vue中 .env .env.development .env.production 详细说明
轻风细雨_林木木
05-12 3万+
1.配置文件有： .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2.命名规则： 属性名必须以VUE_APP_开头，比如VUE_APP_XXX 3.关于文件的加载： 根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载 比如执行npm run serve命令，会自动加载.env.development文件 注意：.env文件无论是开发还是生成都会加载 如上图所示，如过
【已解决】vue/react .env.development 中读取不到变量：undefined
程序边界
06-01 3590
中读取不到变量，undefined。react 项目中，通过。
Vue配置生产环境和测试环境的参数，.env.production、.env.development怎么用？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-30 3400
​在项目根目录新建两个文件分别为.env.production文件.env.development文件​。我们下面的例子分开来写只用.env.production.env.development。接下来，我们在app.vue中打印一下我们设置的这个VUE_APP_URL。.env.development文件。.env.production文件。然后配置package.json。无论什么环境都会加载。............
vue项目中index.html文件中使用.env.production和.env.development中的常量值
牛先森家的博客
05-12 6906
vue项目中index.html文件中使用.env.production和.env.development中的变量值public文件中的index.html.env.development.env.productionvue.config.js中的修改 public文件中的index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="
vue .env.development 配置
04-22
它是什么？如何使用它？ .env.development 文件是用于开发环境的配置文件。它可以存储开发环境所需要的各种配置项，比如 API 地址、端口号、URL 等等。这些配置项在开发过程中可以通过 process.env.XXX 的方式获取到，其中 XXX 是配置项的名称。 在使用 .env.development 文件时，需要在 Vue 项目的根目录下创建一个名为 .env.development 的文件，并在其中定义配置项。在项目中，可以通过 process.env.XXX 的方式获取到定义在 .env.development 文件中的配置项。在 devServer 的配置中，也可以通过 process.env 来获取到配置项。 需要注意的是，.env.development 文件中的配置项只在开发环境中生效，打包时并不会被打包进最终的代码中。如果需要在生产环境中使用这些配置项，可以创建一个 .env.production 文件用于生产环境的配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值