vue build打完包 生成配置文件，以外部外部修改公共ip路径

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量613 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48203828/article/details/129382071
版权

1、第一步：在dist里边创建一个xxx文件夹和一个xxx.js文件
2、第二步:在创建好的js文件里边创建几个变量
在这里插入图片描述
3.第三部在dist里边引入这个js文件路径
在这里插入图片描述
4、在之前封装写的ip路径那边改一下
在这里插入图片描述
改成这样

window.UrlListIp=UrlListIp //服务器onemap接口地址    服务器
window.UrlBigIp =UrlBigIp //服务器测试接口地址
window.geoserverIp =geoserverIp //geoserver地址
window.getRealTimeVideo = getRealTimeVideo
window.userlogon = userlogon//登录接口

这样打完包之后 在dist里边能看到刚才创建的js文件，这样其他人就可以更改ip路径了

战斗中的老段
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE项目打包之后修改配置文件（包括后台地址，图片公共路径等）
weixin_42634040的博客
11-03 1万+
Vue 打包后，如果想修改整体的后台接口域名，或者图片文件的路径，就需要在源代码中修改后，再次进行build打包。这样很不灵活，先看一下vue打包后的文件结构： 项目打包后会生成一个dist文件夹 dist中有一个存放外部资源的static，它里面的文件是不会被打包编译的， 所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，也就是将图中的config.js引入到项目里的index.html中使用，然后就可以全局使用。 项目中使用到的文件大致有上图几个 1
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
weixin_39475476的博客
04-22 508
安装generate-asset-webpack-plugin插件
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
10-17
基于Vue-cli 项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。这篇文章主要介绍了基于Vue-Cli 打包自动生成/抽离相关配置文件 ,需要的朋友可以参考下
基于Vue cli开发修改外部组件Vant默认样式
AAAAahao_的博客
04-02 3418
文章目录前言一、Less二、引入你的组件三、修改配置文件第一步：直接引入less文件第二步：修改样式变量总结 前言 在引入外部组件的时候，想要默认样式，不仅可以通过class修改，但一般会有权重不够等各种原因，官网其实列出列一套主题定制的方案，通过覆盖配置文件来修改样式，官网地址：主题定制 提示：以下是本篇文章正文内容，下面案例可供参考 一、Less 因为Vant 使用了 Less 对样式进行预处理，并内置了一些样式变量，可以通过替换样式变量即可定制你自己需要的主题。 给你的项目配置less： npm
如何做到在webpack打包vue项目后，在外部动态修改配置文件
weixin_34055910的博客
05-11 1705
在我们做完vue项目后，只需要执行 npm run dist 就可以轻松进行打包转测试，可是如果我们临时需要修改一些配置文件比如域名，这时候我们就有点懵逼了，那就修改了再重新打一次包？ NO NO NO，让我们一起来探索如何解决这个问题吧。 首先我们需要借助一个插件generate-asset-webpack-plugin npm install generate-asset-webpa...
vue如何外置配置文件，灵活修改接口地址
laipengfei19的博客
09-16 5095
vue如何外置配置文件，灵活修改接口地址 最近使用vue2，webpack3打包项目，每次打包，接口地址都会被打包进去，无法自由修改。这是一个对前端增加工作量，对测试很不友好的操作。然后自己查了下资料，都说使用generate-asset-webpack-plugin插件，自己试着成功外置配置文件，这里做下记录。 首先安装插件 npm install generate-asset-webpack-plugin -S -D 在build文件夹下，新建一个文件generate-asset.config.js。
vue读取static配置文件，解决dist修改外部引用配置文件的问题
qq_42900469的博客
11-17 2275
vue读取static配置文件，解决dist修改外部引用配置文件的问题
vue打包怎么在外部配置文件（端口），并可以动态访问端口地址（输入什么就访问什么）
buchishutiao的博客
02-05 2273
需求：每次修改程序会很麻烦，需要我们在打包的时候生成配置文件，直接修改文件就可以改变端口。1.首先在打包的目录static下创建config.js文件。3.还在此目录下的index.html引用config.js。但是我是在项目的更目录加的 打包完之后这里也会出现引用的。2.config.js文件内容（加双引号）4.定义全局变量global.js。5.在main.js中引用。7.打包后就可以读取了。
vue 项目中的 public、static及指定不编译文件
weixin_43714836的博客
11-20 3989
vue 项目中 public、static 及自己指定不编译文件，原里都是通过插件 cope-webpack-plugin 来实现。当某些文件不需要 webpack 解析时，指定不编译的功能很有用！
Vue在外部配置打包文件夹名称和url地址前缀
~~
06-23 5313
在public中添加以下两个js文件 vue.config.js: config_settings.js: 注意：在npm run build打包之前，需要先配置以上文件，使打包内容生效1、配置浏览器地址前缀，需要修改同时修改config_build.js中的ROUTE_PREFIX和config_settings中的ROUTE_PREFIX，并且这两个值需要保持一样。 2、配置打包文件夹名称，只需配置config_build中的ROUTE_PREFIX即可。3、如果打包出来的项目是放
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
10-16
主要介绍了webpack + vue 打包生成公共配置文件（域名） 方便动态修改,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue打包之后生成一个配置文件修改接口的方法
10-17
主要介绍了vue打包之后生成一个配置文件修改接口 的相关资料,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue引入外部文件_Vue项目中引入外部文件（css、js、less）
weixin_39942995的博客
12-19 313
例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件)步骤一：安装webpackcnpm install webpack -g步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。将bootstrap.css放入css目录下，bootstrap.min.js放入js文件下，fonts字体放入...
Vue - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次修改配置都需要重新打包的问题）超级详细的解决示例代码
王佳斌
03-20 4054
vue.js网站项目打包H5后 希望可以修改固定的配置，vue.js h5 PC网页项目打包后修改不方便有没有一个配置文件能不被打包，vue.js网站每次打包后都会把配置文件给弄消失怎么办，vue.js H5配置打包文件抽离出config.js进行线上可修改接口，vue.js 每次改点东西都需要重新打包，怎么让 vue.js 的h5项目打包后仍可修改配置文件呢，vue.js - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次
vue打包配置文件外置
zhaotian2017的博客
02-15 2111
1.在vue项目中的static目录下新增文件config.json { "apiUrl": "http://127.0.0.1:30010/support/" } 2.在main.js中引入axios，并定义一个全局函数来获取配置文件 import axios from 'axios' Vue.prototype.$http = axios Vue.prototype.getConfig = function () { this.$http.get('./static/config
vue2打包后，接口地址可在打包文件中配置
reembarkation的博客
01-08 824
vue2打包后，接口地址可在打包文件中配置
vue-cli打包的项目改为动态配置域名地址——利用public静态文件的处理
yehaocheng520的博客
03-21 4719
vue-cli打包的项目改为动态配置域名地址——利用public静态文件的处理
vue项目打包生成外部配置文件修改后端访问地址
山谷里的杂货铺
07-04 3739
前端打包需要向后台问一个接口访问地址，测试环境、生产环境都需要一个地址，每次打包时都要前端切换地址，感觉很麻烦，现在这个方法是打包后，在配置文件中修改地址。1、在public 文件下新建一个config.js文件，并进行编辑 2、找到你请求接口的地方 3、修改Index.html文件，引入config.js文件 4、dist包 只要修改dist包下的config.js文件的url就可以了...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 667
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
webpack + vue 打包生成公共配置文件
09-10
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，可以将多个模块打包成一个或多个静态资源文件。Vue 是一个流行的 JavaScript 框架，用于构建用户界面。 在将 Vue 项目打包时，可以使用 Webpack 来生成公共的配置文件，以便在不同的环境中共享和重复使用。 首先，可以创建一个名为 `webpack.base.config.js` 的公共配置文件。该文件会包含一些通用的配置，例如入口文件、输出路径、加载器、插件等。通常，会将所有环境共有的配置项放在这个文件中。例如： ```javascript module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, // 其他加载器规则... ], }, plugins: [ new VueLoaderPlugin(), // 其他插件... ], }; ``` 然后，在不同的环境配置文件（如 `webpack.dev.config.js`、`webpack.prod.config.js` 等）中，可以通过引入公共配置文件并进行合并来继承公共的配置。例如： ```javascript const merge = require('webpack-merge'); const baseConfig = require('./webpack.base.config.js'); module.exports = merge(baseConfig, { // 为开发环境或生产环境添加额外的配置项 }); ``` 这样，可以在不同的环境中共享公共配置，减少重复工作，并且方便管理和维护项目。 最后，可以使用命令行或配置文件来指定要使用的环境配置文件，以便在打包时根据不同的环境生成不同的配置。 通过使用 Webpack 生成公共配置文件，可以更好地组织和管理 Vue 项目的打包配置，提高开发效率，并且方便进行项目的扩展和维护。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值