vue 根据环境配置打包后的接口路径（.env）

VIP文章再见 1998

已于 2022-08-16 11:37:25 修改

阅读量1.2k

点赞数

分类专栏： js 文章标签： vue.js javascript 前端

于 2022-08-05 13:55:25 首次发布

本文链接：https://blog.csdn.net/weixin_41582348/article/details/126176059

版权

在项目根目录下配置三个文件（config.js可以随意起名，只要引用对了就行）

创建文件图片

.env.prod

//字段名不能变，必须按照此格式
NODE_ENV='production'
VUE_APP_PROFILE='prod'
VUE_APP_URL='prod'

.env.test

//字段名不能变，必须按照此格式
NODE_ENV='production'
VUE_APP_PROFILE='test'
VUE_APP_URL='test&

最低0.47元/天解锁文章

优惠劵

再见 1998

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue 根据环境配置打包后的接口路径（.env）

vue 根据环境配置打包后的接口路径（.env）
复制链接

扫一扫

专栏目录

vue项目使用.env文件配置全局环境变量的方法

10-16

主要介绍了vue项目使用.env文件配置全局环境变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址

web前端学习总结

07-29

5178

vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址我们大多数在开发的时候，都会有三种环境，一个是开发环境，一个是测试环境，一个是生产环境，我们打包的时候需要根据不同的环境去加载不同的API地址。用vue-cli2打包的vue项目中可以根据更改配置文件，达到我们想要的效果。 1 . 更改package.josn文件在package.json文件的script文件下添加"tes...

参与评论您还未登录，请先登录后发表或查看评论

如何修改Vue打包后文件的接口地址配置

weixin_43123984的博客

02-10

2183

如何修改Vue打包后文件的接口地址配置步骤一在public文件下新建一个config.js配置全局变量步骤二在public文件下的index.html中引入config.js 步骤三在api中使用全局变量baseURl 步骤四在vue.config.js中配置打包后路径以上配置结束后，npm run build生成的dist文件中的config.js便可外部动态修改baseUrl了 ...

vue 不同环境打包指令的配置（vue-cli2、vue-cli3、vite）

lx6091543wwwcctv的博客

04-07

646

一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候为不同环境配置不同的打包指令就很必要。

vue环境变量配置打包（本地、测试、生产）

weixin_47822796的博客

11-08

491

vue根据不同环境配置打包环境

Vue-ele-admin 后端接入【00 修改请求接口路径及代理】

Damionew的博客

02-04

1877

Vue尚未入门者，有错误烦请指正！ Vue-element-admin项目使用mock模拟数据，现在需要改为后端接口 1、将反向代理修改为后端接口地址原使用mock模拟数据 devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js') } 修改后使

如何修改Vue打包后文件的接口地址配置的方法

10-15

主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

解决vue单页面应用打包后相对路径、绝对路径相关问题

11-20

但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下： 1、打包后的index.html文件 2、打包后的css文件所以，如果在项目中需要使用...

Node.js中环境变量process.env的一些事详解

10-19

主要给大家介绍了关于Node.js中环境变量process.env的一些事，文中通过示例代码介绍的非常详细，对大家学习或者使用node.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

vue3动态修改打包后的请求路径

bighead的博客

06-16

1811

动态修改打包后的请求路径

vue打包后路径问题解决

qq_32741973的博客

11-21

674

打包后修改环境路径

m0_61103773的博客

06-07

292

替换为this.baseURL。

VUE项目使用.env配置多种环境

櫆溟的博客

03-15

9314

VUE项目使用.env配置多种环境

WEB转Flutter基础学习笔记（内含vue和flutter对比）

最新发布

小易不止于搬砖的博客

05-17

670

笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter

vue3.0+antdv的admin管理系统vue-admin-beautiful推荐

独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)

05-15

1109

几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。

vue中的事件

weixin_43390711的博客

05-16

162

需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()

Vue.js的发展史（一）

2301_79683791的博客

05-15

755

Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。

基于Vue和uni-app的增强型多选框Checkbox组件开发

chenchuang0128的博客

05-16

352

该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。

Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）

山花的博客

05-15

1040

除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。

我确保我.env.test没有错误，并且在dev或者prod环境中打包都完成正确

07-13

如果你的 `.env.test` 文件没有错误，并且在开发或生产环境下打包都正常，但在测试环境下打包出现问题，可能是由于以下原因之一： 1. 请确保你已经正确地设置了测试环境的配置。在 Vue CLI 项目中，默认情况下，只有 `.env`、`.env.development` 和 `.env.production` 三个文件会被加载。你需要在项目根目录下手动创建一个名为 `.env.test` 的文件，并在其中设置测试环境的配置项。 2. 检查你的测试环境配置文件中的变量名是否与代码中的使用方式一致。确保在代码中正确地引用了测试环境的配置变量，比如通过 `process.env.VUE_APP_XXX` 访问变量值。 3. 如果你使用了自定义的 webpack 配置，可能需要检查一下你的配置文件是否正确地处理了测试环境的情况。确保在 webpack 配置中引入了 `.env.test` 文件，并将其中的变量注入到打包过程中。 4. 检查你的项目结构和文件路径是否正确。特别是确认测试环境的静态文件路径是否与其他环境一致，并且确保测试环境的静态文件被正确地部署到了服务器或本地目录中。如果你能提供更具体的错误信息或代码片段，我可以更好地帮助你排查问题。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交