vue项目从配置文件中读取配置的地址，vue打包动态配置文件

最新推荐文章于 2024-11-01 19:06:00 发布
最新推荐文章于 2024-11-01 19:06:00 发布
阅读量2.3k 收藏 3
点赞数 1
文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28813031/article/details/120448171
版权

增加动态配置文件，打包后的前端可以根据现场修改访问地址

需要配置其他值也类似在配置文件进行设置

这里以配置地址为例进行说明如下：具体项目中已经使用过没有问题，大家可参考

1.首先增加配置文件config.js

在public文件下增加config.js或在static文件下增加config.js

例如：并增加配置记录

window.dict = {

    "author_name": "dingwangjun"

    "BASE_API" : "http://172.10.10.44:9090"

}

2.在index.html文件下引入配置的config.js文件

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

</head>

<script src="./config.js"></script>

<!--<script src="/static/config.js"></script>-->

<body>

<div id="app" style="height:

最低0.47元/天 解锁文章
1964347597
关注
vue从外部配置文件读取服务器地址,Vue 如何 import 服务器上的js配置文件__Vue.js...
weixin_36372014的博客
07-31 856
theme: channing-cyan背景项目中有一个本地配置文件：// src/image-position.jsexport default {label: '首页',value: 'home',data: [{label: '轮播',value: 'carousel'}]}如何引用一个本地文件大家都知道：import ImagePosition from './image-position...
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
12-10
然后，在 `main.js` 文件中，我们需要添加代码来读取这个配置文件，并将其挂载到 Vue 实例上，以便全局访问： ```javascript import axios from 'axios'; // 读取配置文件内容 async function getServerConfig...
获取App.config配置文件中的参数值
10-23
介绍了获取app.config配置文件中的参数值方法，首先是要添加System.Configuration引用，其次类文件中必须有 using System.Configuration;再次App.config添加，最后向App.config配置文件添加参数，下面通过列子给大家讲解下,需要的朋友可以参考下
vue根据不同的命令读取动态修改配置文件
weixin_40057028的博客
06-27 1322
vue根据不同的命令读取动态修改配置文件
获取vue.config.js里代理的路径
最新发布
qq_57305148的博客
11-01 432
vue.config.js 主要用于配置 Vue CLI 的构建和开发服务器选项，不能直接拿到里面的值，如果是自己重新写的config，引入到页面就可以拿到。vue.config里不能使用变量，所以可以写个备注，如果需要改的话，顺带把新创建这块的也改掉。在public目录下创建config.js，然后在同级目录下的index.html里引入。下面说，我的解决办法，如果有更好的，一定要给我说啊。然后在页面上就可以直接用了。
vue从外部配置文件读取服务器地址,webpack打包VUE项目读取外部配置文件，灵活配置域名...
weixin_28875613的博客
07-31 907
作为一个兼职前端和运维的java程序员，今天我司测试人员提出了一个需求，当后台服务地址ip地址改变后，webpack打包的VUE项目得更改地址重新打包，太麻烦了，最好可以读取外部配置文件的域名，灵活部署。这不是在刁难我胖虎吗，后来我在网上查资料，发现有解决思路，具体详细的解决方案没有，在和前端同事研究后，解决了该问题，现记录一下，供大家遇到此问题时参考。我司的前端项目我是用nginx部署的，原配置...
在vue中如何获取项目src外层的config目录以及api接口proxy的target代理地址
商务合作 / 项目定制开发 / 前端一对一培训、答疑
11-29 4248
因为后端proxy接口是放置在src外面的config目录中的，如果要方便获取，可以设置类似于用@代表src一样的路径别名。 需求是某个接口需要服务器的hostname和port，这时就需要知道后端代理地址。比如下方的target地址。
vue 打包后抽取配置文件
mygoes
04-22 2503
vue 打包后抽取配置文件 用 vue-cli 构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，这就需要将后台接口地址打包进项目中。 此时如果只是改个接口地址也要重新打包那就太麻烦了，解决方法是直接加个config.js文件。 亲测可行!!! 本人项目结构如下: 亲测可行!!! 本人打包后文件结构如下: 步骤一: 在 public 文件夹 或者 static 文件夹 下新...
vue项目使用.env文件配置全局环境变量的方法
10-16
然后，在Vue项目的某个JavaScript文件中，你可以通过process.env.VUE_APP_API_URL访问API的URL地址，通过process.env.VUE_APP_TITLE获取应用标题。 值得一提的是，这些环境变量在构建过程中会被静态嵌入到生成的包...
如何实现vue项目读取配置文件，不重新打包
好记性不如烂笔头
01-14 7484
在项目开发时，经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致，部署测式环境打个包，上线生产时又要重新出包，这样测试又会担心最后这此打包会不会出问题，到生产环境还有问题，为了解决这个问题，特将这些配置信息剥离出来，不在进行重新打包，只需要修改一个文件，vue打包好的项目直接读取配置文件内容就可以了。具体方法如下： 1、public下创建project.config.json pro...
Vue:从文件里读取配置
amadeus_liu2的博客
01-12 2112
1.在src目录下建立一个util目录，并在其中建立config.js let username='amadeus_liu' let password='987654' let age=23 export { username, password, age } 2.在.vue文件中引入上述配置文件： import {username} from "../util/config" 3.在代码中使用username的值 ...
vue项目读取全局配置
左直拳的马桶_日用桶
06-29 9930
普遍的需求，却很少有现成的答案。我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有3个地方会用到系统名称：登录页，登录后页面的页头，以及每个页面的title。直接写在页面里，当然没有什么大问题，但修改繁琐，且容易出现不一致的情况。对于VUE项目来说，咋弄？vue页面无须多言，假如存在一个配置文件，直接读取配置文件就好了。而对于项目唯一的页面/public/index.html怎么办？这是一个静态页面。我查了许久。......
Vue3核心源码笔记#配置环境（获取到打包文件）（一）
qq_68073427的博客
04-15 1346
打包是用monerepo,所以需要安装一下yarn,不能使用npm进行项目初始化，npm install -global yarn yarn init -y。
vue添加配置文件 超简单
一个抠得儿
07-15 9341
在项目下static目录添加文件config.js 内容格式如下： const config = { ta: "abc" } 在项目index.html内引入 <script src="/static/config.js"></script> 在需要使用的组件中直接config.ta就可以获得数据了 ...
vue-vue.config.js
前端
08-12 4421
vue项目的配置文件位置内容 vue2.0的版本目录结构已经变化了，没有了之前build与config文件夹，因此如果需要配置build的生成目录等打包需求，需要vue.config.js 位置 vue.config.js文件在项目的根目录下，与src平级 内容 //主要是用于分析项目的大小占比的，不需要的话可以注释掉 // const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyze
vue项目实现动态baseURL,可以在打包后进行配置
Along前端开发者
04-19 3246
目前推出这种方案：要在打包为dist后，依旧可以直接在dist中进行修改。并且生效。
Vue项目：在项目某个文件中获取目标代理服务器地址
qq_46103732的博客
08-16 3066
前端在实现点击按钮下载的需求时，无论是采用a标签还是window.open方法，都需要写上完整的文件下载路径（如：192.168.1.1:8000/files/down_excle）,但是当我们后端更换网络或者项目上传云端后，这里的IP地址一定会发生变化，如果将地址写死，下载功能则会失败。最后进行路径拼接即可。...
vue如何外置配置文件，灵活修改接口地址
laipengfei19的博客
09-16 6597
vue如何外置配置文件，灵活修改接口地址 最近使用vue2，webpack3打包项目，每次打包，接口地址都会被打包进去，无法自由修改。这是一个对前端增加工作量，对测试很不友好的操作。然后自己查了下资料，都说使用generate-asset-webpack-plugin插件，自己试着成功外置配置文件，这里做下记录。 首先安装插件 npm install generate-asset-webpack-plugin -S -D 在build文件夹下，新建一个文件generate-asset.config.js。
Vue3+TS全局配置信息外放，axios读取配置信息，动态挂载，实现一客户一配置文件
dugucike的专栏
04-13 1818
我们做一套代码，可能需要卖给N多客户，可能很多客户都会给软件冠名，AXXX系统，BXXX系统，我们的软件已经做完了，没必要卖给一个客户改个名称发布一次，所以我们把软件名称外放到一个配置文件config.json中，卖一次，配置一下config.json文件就可以了，这样有一个好处是，我们可以保证每个客户有自己独立的config.json文件，并且里面定义的内容都是他们自己风格的，变量再多，我们也不必发布一次编译一次，程序更新的时候，我们保证不覆盖客户的config.json文件即可。//站点基本配置信息。
vite打包vue项目读取外部配置文件,灵活配置域名
08-30
这样，我们就可以将域名配置信息定义在外部配置文件中，并在项目中通过导入来灵活地使用。当我们需要修改域名时，只需修改外部配置文件中的配置，而不需要修改项目代码本身。 但是需要注意的是，当使用Vite打包项目...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值