Vue 打包后可配置解决方案

已于 2022-03-03 16:24:19 修改
阅读量846 收藏 1
点赞数 1
分类专栏： vue-cli4 vue 文章标签： vue.js javascript 前端
于 2022-03-03 16:19:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Weiverly/article/details/123256866
版权

vue-cli4+项目打包后生成可修改的配置文件

项目开发过程中，总会有一些数据需要我们动态去修改，开发过程中改起来还比较方便。但是项目上线后，再进行改动，还需要重新打包，这样一来二去就变得十分麻烦。

下面介绍vue-cli4+项目打包后生产可修改的配置文件的方法

  1. 首先在public文件下创建一个config.js文件，与index.html同级
    在这里插入图片描述

  2. 将打包后仍需要修改的信息写到config.js文件里。采取将需要配置的信息挂到window全局变量上面，并通过index.html引入，从而通过window对象访问，达到同步的效果，具体操作如下
    在这里插入图片描述

  3. 在index.html引入
    在index.html中引入后，可直接获取config对象内的值，如config.mapAPI

最低0.47元/天 解锁文章
柠檬不心酸哇
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue-cli3打包代码后白屏的解决方案
01-19
最近使用了vue-cli3.0 开发了一个移动网页端项目，准备打包发布了。按照以往的流程 npm run build 问题来了 打开 dist index.html 文件发现白屏。打开调试后 发现文件引用路径不对 根据以往的经验 根目录下新建 vue....
在项目打包之后对配置文件进行修改
weixin_42069587的博客
05-24 2418
在Vue项目中一般都将配置文件写在 .env.development / .env.production 文件当中，但是如果仅仅是因为修改配置文件又重新打包一次就会很繁琐，浪费时间。于是可以将配置文件写在 public / static 文件夹下，此文件夹里面的文件并不会参与打包，所以在打包之后再对配置文件进行修改就会很方便。4. 打包之后config.js文件就会在根目录上，就可以了很方便的对配置信息进行更改。2. 在配置文件中最好套一层立即执行函数，确保这个配置文件是在最开始执行的。
vue项目打包后动态修改环境
姬如问天的博客
07-18 980
一般情况下，我们提前知道服务器IP，可以在项目中写死直接打包，把生成的dist包部署到指定服务器中。 特殊情况下，尤其是一些招标外包项目，客户尚未提供实际生产IP和一些重要参数，开发阶段就需把这些信息进行动态配置，项目打包后也可在不重新打包的前提下修改。
vue技巧（十）全局配置使用（打包后可修改配置文件）
最新发布
Interest1_wyt的博客
06-13 879
vue js或json全局配置使用，打包后保持配置文件不变，支持打包后修改配置文件内容
【VUE2.0】1、 webpack及插件的配置和使用
菜鸟日记
11-23 1964
前端工程化的概念 模块化 组件化 规范化 自动化 前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化 早期的前端工程化解决方案： grunt gulp 目前主流前端工程化解决方案： webpack ......
Vue 项目打包后可修改基础接口地址配置
热门推荐
无解的菜鸟晖 的博客
10-04 1万+
一、目的 最近在学习或工作中遇到，把 Vue 前端项目打包后，要求可以再次修改请求后端接口的基础地址。平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里。 这样子打包后如果要改图里红框处的地址，要么去打包编译后的文件堆里一个个搜索（如果项目不小的话，这文件堆可不少...），找到后直接改，要么在源码里改完后重新再打包部署，这两种做法都显得有些麻烦，且维护性也不好。 所以本文用一种较好的方案来解决以上问题，通过创建一个静态资源里的外部文件，引...
vue.config.js vue 打包配置
qzonemen的专栏
09-27 1466
const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] const Timestamp = new Date().getTime(); module.exports = { publicPath: './', productionSourceMap: false, // false : 不生成map文件 .
详解vue静态资源打包中的坑与解决方案
11-28
vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，部署项目至特定路径下：如： //ip:port/public/springActivity/ 此时访问： http://ip:port/public/springActivity/index.html index....
vue项目打包之后背景样式丢失的解决方案
10-17
本篇文章将详细介绍这个问题的原因以及提供相应的解决方案。 首先，我们需要理解为什么会出现背景样式丢失的现象。在Vue CLI构建项目时，为了优化性能，它会自动处理项目中的静态资源，如图片。对于较小的图片，Vue...
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
Vue3 配置config文件，打包后随意修改配置，无需重新打包和重启
Admans的专栏
11-22 3910
在public目录创建config.json文件，名字随便起。刷新页面后即显示新的内容。打开main.js，导入。
Vue3 cli如何抽离出一个配置文件，用于打包后动态修改。
olklj的博客
08-08 746
5. 打包时 config.js 会作为单独的 chunk 进行输出,可以直接修改这样就实现了将配置抽离为单独的文件,打包后可以直接修改配置而不需要重新构建。4. 在代码中可以通过 import 来获取配置。
vue 项目打包之后进行修改配置后端 IP 地址、端口等信息方法
CSDN_33901573的博客
05-11 8446
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，我们只是改个接口地址也要重新打包那就太麻烦了。怎么解决呢？方法如下，本文推荐俩种方式。
vue项目打包后 希望可以修改配置（接口地址，系统名称等）
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-09 3141
项目打包发布，之后可能存在接口域名更换，项目名称修改等情况，就需要开发人员重新修改代码，重新发布，比较费时费力。希望可以将这些配置在一个文件中，如需更换，运维可直接打开配置文件，更改保存即生效。......
vue项目打包后自定义可更改某些参数的配置方法
weixin_50158618的博客
12-22 1948
vue项目，打包后需要在特点的内网环境下进行某些属性的重新更改的配置方法
vue 项目中的打包配置
hjh15827475896的博客
12-09 2633
当我在使用vue 项目的时候， 我们可能会打包一下线上环境发布， 一会又在本地启动， 因为线上的环境要放在站点根目录下的二级目录中， 而我们的测试环境只是在 ./ 的根目录下， 所以， 当我要打包的时候， 我一般的会更改文件的三个地方 一. vue.config.js 文件中的 publicPath 配置项 二. 修改 vue 的路由文件的 router.js 三. 在我封装的 请求类中 http.js中的 axios 配置修改 上面这样 打开后又注释真是麻烦 后来我使用了 proces
vue设置全局配置文件，打包后在dist包内可动态修改配置
weixin_43485503的博客
07-14 6278
vue设置全局配置文件，打包后在dist包内可手动修改配置文件
Vue CLI 命令行打包配置自定义参数
lkr_lkr的博客
03-31 1万+
Vue CLI 命令行打包配置自定义参数前言重点 vue.config.js在 vue.config.js 文件中计算环境变量配置代码命令日志使用扩展彩蛋 前言 难点来自于需求，好????那我们就说说我是因为什么需求呢？ 需求：我要通过【页面ID】访问接口数据，进行Vue模块化构建包含【页面数据】的静态页面。我有很多的页面ID!!!（不要纠结为啥有这样的需求，干就完了） 思路：1.通过命令行打包时传入...
vue打包体积过大如何解决
06-07
Vue 打包体积过大，通常有以下几种解决方案： 1. 按需引入组件 Vue.js 的组件化开发模式非常适合将一个复杂页面拆分成多个组件来开发，但如果在打包时将所有组件都打包进去，会导致最终打包文件的体积变得非常大。因此，我们可以使用 Vue.js 提供的异步组件来实现按需加载组件，从而减少打包体积。 2. 配置 externals 在使用 Vue.js 开发时，我们通常会引入一些第三方库（如 moment.js、lodash 等），如果这些库已经在项目中引入，我们可以通过配置 externals 将这些库排除在打包文件之外，从而减少打包体积。 3. 优化代码 我们可以通过一些代码优化的方式来减少打包体积，如： - 使用 tree shaking 技术来删除未使用的代码； - 压缩代码，减小文件体积； - 删除无用的代码和注释； - 减少代码中的重复部分； - 合并打包文件，减少 HTTP 请求次数。 4. 使用 CDN 将一些常用的库或资源文件放在 CDN 上，可以减少页面加载时间和服务器压力，提高网站性能。 总之，针对不同的情况，我们可以采取不同的解决方案来减小 Vue.js 打包体积。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值