vue 配置env环境变量失效问题

最新推荐文章于 2024-04-25 12:50:07 发布
最新推荐文章于 2024-04-25 12:50:07 发布
阅读量2.9k 收藏 2
点赞数 3
分类专栏： vue2 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KK_vicent/article/details/126951821
版权

1.注意变量名要以VUE_APP_开头

2.注意.env.development .env.production要放在项目根目录下（我就是不小心放到了SRC下没发现.......）

3.要在package.json中配置service服务

  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "dev": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

注意一一对应 serve默认为development开发模式

查查茶茶丸
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue:配置.env.dev文件不生效的问题
席木木的博客
06-18 5259
Vue项目的.env.dev文件配置如下，但是在启动项目之后，通过process.env.VUE_APP_SCISERVE获取到的变量值一直为undefined❓❓❓💢💢💢。
vue-cli配置环境变量的方法
12-12
在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://customer.medsci.cn' } 通常会有测试服务器和正式服务器环境之分,我们请求的
【踩坑】vue项目在env文件中设置的变量无效
咫尺天涯的专栏
08-17 4320
vue项目，在开发过程中需要设置环境变量，但是在env文件中设置了变量值，但是无效 经查阅资料发现，vue项目的env变量需要加上“VUE_APP_”前缀。 // 错误的设置方式 BASE_API_PREFIX = '/api' // 正确的设置方式 VUE_APP_BASE_API_PREFIX = '/api' ...
vue中 process.env.XXX环境变量不生效（获取不到数据）
zlfjavahome的专栏
06-20 5394
vue中 process.env.XXX环境变量不生效（获取不到数据）
添加.env.production 文件失效
web前端学习总结
08-12 1718
添加.env.production 文件失效，是因为node_modules 中 cache 库缓存的问题，将node_modules 删除，然后重新install ，再起项目就好了。
解决vue2设置cross-env设置环境变量不起作用问题
wangshuai13383347132的博客
10-12 1182
解决vue2设置cross-env设置环境变量不起作用问题
vue项目环境配置文件.env不起作用
weixin_52395730的博客
07-13 2872
vue项目环境配置文件.env不起作用 .env文件在vue项目启动时加载，如果没有起到作用，可能是缓存的问题，删除node_modules下的.cache文件试试。
vue3 process.env.XXX环境变量不生效
黎小小的博客
11-16 6990
使用process.env.XXX时获取不到环境变量的值 一：项目根目录下的.env.development和.env.production环境配置文件中，NODE_ENV=二：.env.development和.env.production环境配置文件中变量名必须以VUE_APP_开头。的值必须和package.json文件启动配置--mode一致。
vue使用自定义.env.test 配合启动项目报错
qq_64775236的博客
01-16 411
vue使用自定义.env.test 配合启动项目报错
VUE3 学习笔记（四）彻底搞懂vite 环境变量
sensor_WU 博客
03-23 4726
env # 所有情况下都会加载.env.local # 所有情况下都会加载，但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载，但会被 git 忽略注意，上面这些是文件名，其中方括号[mode]是指当前构建模式，比如：development表示开发环境，production表示生产环境。注意：以上文件默认情况下一定要和 vite.config.ts 配置文件放在同一个目录，否则将导致无法加载到环境变量。
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境下的基础地址，**拼接到** axios 里面的 url ） 3，模块化开发 4，使用插件对代码进行测试判断环境配置是否成功
vue项目使用.env文件配置全局环境变量的方法
10-16
主要介绍了vue项目使用.env文件配置全局环境变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目环境变量配置的实现方法
12-09
问题 实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = 'https://xxxxxxxxx'; } else if (process.env.NODE_ENV == 'development') { baseUrl = '/api' } export { baseUrl } process.env.NODE_ENV 是通过webpack 内置的 DefinePlugin
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
19篇 vue3进阶
hummhumm的专栏
04-20 414
10. **组件定义的分离**：通过 `defineComponent` 方法分离组件逻辑与模板。23. **事件总线 (`provide` / `inject`)**：祖先与后代组件间通信。33. **跨平台支持**：如 `Nativescript-Vue` 或 `Uni-app`。9. **动态组件和 `v-if` / `v-for`**：更灵活地使用这些指令。20. **计算属性 (`computed`)**：创建缓存的计算属性。12. **组件的 `expose` 选项**：显式指定组件公开属性。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 404
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
最新发布
xu_duo_i的博客
04-25 296
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
vue3【详解】 vue3 比 vue2 快的原因
朝阳39的博客
04-19 940
vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！
python_django中小学家校互动系统vue_flask家校联系
专注分享bishe530的博客
04-19 842
班级学生 (自动编号、性别、教师姓名、年级、头像、班级、创建时间、学生姓名、家长账号、学号、年龄、教师工号)；
vue3 index.html下使用env环境变量
06-10
Vue 3 中也可以通过环境变量来进行配置，与 Vue 2 的方式基本相同。以下是在 index.html 中使用环境变量的方法： 1. 在项目根目录下创建一个名为 `.env` 的文件，或者根据需要创建 `.env.development`、`.env.production`、`.env.test` 等文件。注意：`.env` 文件中的环境变量会在所有环境中生效，而 `.env.local` 文件中的环境变量只在开发环境中生效。 2. 在 `.env` 文件中定义环境变量，以 `VUE_APP_` 开头的变量会被自动注入到 Vue 应用的环境变量中，例如： ``` VUE_APP_API_URL=http://localhost:3000 VUE_APP_DEBUG=true ``` 3. 在 index.html 中使用环境变量，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My App</title> </head> <body> <div id="app"></div> <script> const apiUrl = '<%= process.env.VUE_APP_API_URL %>'; const debug = '<%= process.env.VUE_APP_DEBUG %>'; console.log(apiUrl); // http://localhost:3000 console.log(debug); // true </script> <!-- built files will be auto injected --> </body> </html> ``` 需要注意的是，在使用环境变量时，需要在模板中使用 `<%= ... %>` 来获取环境变量的值。如果在 Vue 组件中使用环境变量，可以使用 `process.env` 来获取，例如： ```javascript export default { mounted() { console.log(process.env.VUE_APP_API_URL); // http://localhost:3000 console.log(process.env.VUE_APP_DEBUG); // true } } ``` 需要注意的是，如果在 Vue 组件中使用环境变量，需要在 `vue.config.js` 中将 `runtimeCompiler` 设置为 `true`，否则会出现编译错误。例如： ```javascript module.exports = { runtimeCompiler: true } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值