vue-cli打包抽离出配置文件

最新推荐文章于 2023-08-08 11:17:50 发布
最新推荐文章于 2023-08-08 11:17:50 发布
阅读量637 收藏
点赞数
分类专栏： 杂七杂八的bug 文章标签： 配置文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32754575/article/details/103144384
版权

vue-cli打包抽离出配置文件

需求

同一份代码，适应两份需求。解决：打包后抽离出一份配置文件，在部署时通过修改配置文件达到适应不同的需求。

在static中添加配置文件config.js

config.js打包后不被打包，如图
在这里插入图片描述
config.js内容

window.home={
    id: 1    // 首页河南
    // id: 0    // 正常
}

修改index.html

在这里插入图片描述
完事，后期部署时通过修改config.js就行。
有些人好菜啊！！！

大大的叹号
关注
专栏目录
vue-cli4打包最强优化（10M变300kb）
2301_77110865的博客
05-06 599
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
基于vue-cli 打包时抽离项目相关配置文件详解
11-26
前言：当使用vue-cli进行开发时时常需要动态配置一些设置，比如接口的请求地址（axios.defaults.baseURL），这些设置可能需要在项目编译后再进行设置的，所以在vue-cli里我们需要对这些配置文件进行抽离，不让webpack把配置文件也进行编译。 首先，我们需要在/static 下面新建一个js文件作为配置文件 里面的内容如下： window.g={ AXIOS_TIMEOUT:10000, SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址 } 这里将所有的配置注入到window对象的一个属性里面，
如何在Vue中抽离接口配置文件
10-16
主要介绍了Vue中抽离接口配置文件的问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
12-10
背景 •基于Vue-cli 项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式，都是半自动化的，还需要重新修改。 需求点 •配置化：打包后的配置文件可二次修改 •配置自动生成：vue-cli 提供了各种环境的打包，要实现相关配置文件的自动打包 •研发人员无痛感：对于产品研发人员来说，不需要增加额外的打包成本，基于Vue-cli的开发习惯不变。 实现步骤 一：配置自动生成 •安装generate-asset-webpack-plugin插件。用于配置文件自动生成。 npm install --sav
（四）vue.js 外部配置文件（参考）
dazhuanqi8386的博客
11-10 1243
前文我们已经安装了axios，现在我们来配置外部文件 1.在vue项目中的static目录下新增文件config.json { "apiUrl": "http://127.0.0.1:30010/support/" } 2.在main.js中引入axios，并定义一个全局函数来获取配置文件 import axios from 'axios'Vue.prot...
Vue项目的打包详解和配置文件
Black_snow_ji的博客
07-13 2821
项目打包 一、项目打包指令 把vue项目进行打包发布，生成可以在web服务器中进行访问的网页 npm run build 二、详解 我们写的.vue文件是源代码，是不能被浏览器解析的 我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候 cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器,会把把我们写的vue文件进行编译运行 .vue文件在开发的时候能够在浏览器被访问到，是因为有webpack的存在 webpack是一个前端模块化开发工具，可以实现模块化
Web前端之Vue动态配置启动或打包时的参数、读写文件、设置、writeFileSync、readFileSync、toString、replace、process、join
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-17 1943
Web前端之Vue动态配置启动或打包时的参数、读写文件、设置、writeFileSync、readFileSync、toString、replace、process、join
vue打包分离配置文件
Joe的博客
08-05 1959
vue-cli3.x 添加一个serverConfig.json { "AppId": "2982b7ca5a", "token": "0F33CFBA-B4E0-4A9C-A54B-2B2DABEE7B15", "baseUrl": "" } 添加一个vue.config.js文件 var GenerateAssetPlugin = require('ge...
vue 项目中 webpack 打包暴露出配置文件
神膘护体小月半的博客
12-15 2717
应用场景 在实际工作中，为了调试方便，可能需要随时更换接口环境、加解密等相关配置。如果每次调试都重新打包，操作起来比较麻烦，且 webpack 打包之后的内容无法进行反向编译。 我们可以在全局暴露出一个配置文件，使这个文件不会被 webpack 打包，以此用来控制我们需要频繁更改的配置参数。 目录结构及使用 在 static 文件下新建一个 js 文件，我这里起名为 config.js |-- public |-- |-- js |-- |-- static |-- |-- |-- config.j
Vue前端打包详细流程
热门推荐
weixin_44813417的博客
11-15 1万+
前端打包添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式 添加打包命令 package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令： ①npm run build:dev 开发调式环境 ②npm run build:prod 线上调试环境 "build:dev": "vue-cli-service build --mode dev", "build:prod": "vue-cli-service build
Vue3 cli如何抽离出一个配置文件，用于打包后动态修改。
olklj的博客
08-08 907
5. 打包时 config.js 会作为单独的 chunk 进行输出,可以直接修改这样就实现了将配置抽离为单独的文件,打包后可以直接修改配置而不需要重新构建。4. 在代码中可以通过 import 来获取配置。
Oasis 物理第四弹：角色控制器驱动人物动画
小王的技术库
09-28 408
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
vue项目从配置文件中读取配置的地址，vue打包动态配置文件
qq_28813031的博客
09-24 2257
增加动态配置文件，打包后的前端可以根据现场修改访问地址 需要配置其他值也类似在配置文件进行设置 这里以配置地址为例进行说明如下：具体项目中已经使用过没有问题，大家可参考 1.首先增加配置文件config.js 在public文件下增加config.js或在static文件下增加config.js 例如：并增加配置记录 window.dict = { "author_name": "dingwangjun" "BASE_API" : "http://172.10.10.44...
vue 打包后抽取配置文件
mygoes
04-22 2426
vue 打包后抽取配置文件 用 vue-cli 构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，这就需要将后台接口地址打包进项目中。 此时如果只是改个接口地址也要重新打包那就太麻烦了，解决方法是直接加个config.js文件。 亲测可行!!! 本人项目结构如下: 亲测可行!!! 本人打包后文件结构如下: 步骤一: 在 public 文件夹 或者 static 文件夹 下新...
如何实现vue项目读取配置文件，不重新打包
好记性不如烂笔头
01-14 7243
在项目开发时，经常遇到开发环境和生产环境因为某几个引用地址或是参数不一致，部署测式环境打个包，上线生产时又要重新出包，这样测试又会担心最后这此打包会不会出问题，到生产环境还有问题，为了解决这个问题，特将这些配置信息剥离出来，不在进行重新打包，只需要修改一个文件，vue打包好的项目直接读取配置文件内容就可以了。具体方法如下： 1、public下创建project.config.json pro...
Vue 打包优化之 externals 抽离公共的第三方库
天问博客-专注于大前端技术
11-29 3455
使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。
基于Vue-Cli 打包自动生成/抽离相关配置文件
weixin_33896069的博客
12-08 1041
背景 基于Vue-cli 项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式，都是半自动化的，还需要重新修改。 需求点 配置化：打包后的配置文件可二次修改 配置自动生成：vue-cli 提供了各种环境的打包，要实现相关配置文件的自动打包 研发人员无痛感：对于产品研发人员来说，不需要增加额外的打包成...
vue-cli 打包的静态文件不能直接访问
最新发布
01-25
Vue-cli打包的静态文件不能直接访问是因为Vue-cli默认将打包后的静态文件存储在项目根目录下的dist文件夹中，而dist文件夹并不具备服务器功能，无法直接访问其中的文件。 为了解决这个问题，我们需要将dist文件夹中的静态文件部署到一个具备服务器功能的环境中，以便可以通过网络地址和相关协议访问到这些文件。 常见的解决方法是将dist文件夹下的静态文件部署到一个Web服务器上。具体步骤如下： 1. 选择一个合适的Web服务器，例如Nginx、Apache等，并确保已经安装和配置好服务器环境。 2. 将dist文件夹中的所有文件复制到服务器的合适位置，通常是服务器的网站根目录下。 3. 根据服务器的配置和需求，配置相关的路由和访问规则，例如配置Nginx的location。 4. 启动Web服务器，并确保服务器已经在运行状态。 5. 通过浏览器访问服务器的相应地址和端口，即可看到Vue-cli打包后的静态文件。 总之，Vue-cli打包的静态文件不能直接访问是因为缺少服务器功能，需要将这些文件部署到具备服务器功能的环境中才能正常访问。使用Web服务器将dist文件夹下的静态文件部署并配置相应的路由规则是常见的解决方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值