前端vue项目打包之配置文件修改

最新推荐文章于 2024-07-16 16:20:26 发布
最新推荐文章于 2024-07-16 16:20:26 发布
阅读量1.6k 收藏
点赞数
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39438801/article/details/110456195
版权

前言

经常听到前端项目打包之后出现白屏的问题，我这里还没有碰到过，先记一下自己的做法吧

为什么要打包？

一般我们打包都是为了部署到服务器

确定修改的地方

首先我们得找对位置，打开你的config下的index.js文件(我的版本比较高，稍微低一点的版本webpack配置是在自己新建的vue.config.js中进行的）
这里为了方便观察，我把配置细节先折叠起来
在这里插入图片描述
我们打包要执行的命令是npm run build所以不难理解要修改build下面的配置
其实就一个地方要改

 assetsPublicPath: './',

加个点。。。。。 就行了

麻瓜yancy
关注
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
12-10
背景 •基于Vue-cli 项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式，都是半自动化的，还需要重新修改。 需求点 •配置化：打包后的配置文件可二次修改 •配置自动生成：vue-cli 提供了各种环境的打包，要实现相关配置文件的自动打包 •研发人员无痛感：对于产品研发人员来说，不需要增加额外的打包成本，基于Vue-cli的开发习惯不变。 实现步骤 一：配置自动生成 •安装generate-asset-webpack-plugin插件。用于配置文件自动生成。 npm install --sav
前端+将vue项目打包为桌面应用+electron学习
04-15
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建GitHub的桌面客户端而创建的。...Electron基于Node.js和Chromium的开源项目，它将...用途:将vue项目打包为桌面应用
vue打包之后生成一个配置文件修改接口
weixin_33897722的博客
11-17 132
前言： 我们的vue代码打包上传到服务器之后， 要是数据接口 以后换了域名什么的，是不是需要重新去vue文件里修改接口。 能不能生成一个配置文件，里面可以配置域名或其它什么字段之类的，这样以后换了域名，只需打开记事本 修改一下域名即可。 教程： 第一步：安装generate-asset-webpack-plugin插件 npm install --save-dev...
vue 之webpack 的打包原理和用法
最新发布
weixin_53159238的博客
07-16 1641
如上图中间蓝色的部分就是webpack,它会将左边各种文件打包成右侧html能够解析的文件比较重要的两个概念打包和模块。
Vue项目打包需要修改的地方（适用于webpack4.0 亲测，可用）
CSDN_920227的博客
09-10 659
需要修改以下几个文件 1.build/utils.js 用下面代码片段替换原有代码 if (options.extract) { loaders.push({ loader: MiniCssExtractPlugin.loader, options: {publicPath:'../../'} }) } else { loaders.push('vue-style-loader') } 如图 2. config/index.js 用下面代码片段替换原有代码
webpack+vue打包之后输出配置文件修改接口文件
diaobiteng1128的博客
04-20 105
原文地址：https://blog.csdn.net/xiaojun_yuan/article/details/79460484 用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，but，难道我们只是改个接口地...
vue打包之后更改配置的json文件无效
派大星球
08-20 2890
vue打包之后更改配置的json文件无效 坑……在vue项目，给public底下放置了一个静态的config.json文件，用来配置代理ip地址和系统的标题等相关配置，以便于在部署时进行相关更改，但是在部署时只有更改ip配置生效。具体问题如下： public下添加的config.json文件 vue.config.js文件中引入json文件，并设置配置的代理ip 登录页面引入json文件，并使用配置标题 打包之后的json文件 然后坑就出现了，在打包之后，更改打包后的json配置的ip地址生效
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的...
vue项目打包之后背景样式丢失的解决方案
10-17
为了解决这个问题，我们需要在Vue CLI的配置文件中进行调整。打开`build/utils.js`，在该文件中找到处理CSS的代码段，我们需要添加一条配置来修改CSS中背景图片的路径。 在原有代码基础上，添加以下语句： ```...
vue打包之后生成一个配置文件修改接口的方法
10-17
接下来，将通过以下步骤详细介绍如何在Vue项目中实现配置文件修改接口的方法： 第一步，安装generate-asset-webpack-plugin插件。通过npm命令安装该插件，并将其保存为开发依赖。命令如下： ```bash npm install -...
Vue项目打包部署到iis服务器的配置方法
10-16
在配置web.config文件之后，需要将该文件放置到Vue项目打包后的根目录中。完成这个步骤之后，通过IIS访问打包后的Vue项目就能成功地根据vue-router的配置进行页面跳转，不会出现404错误。 总结来看，Vue项目在IIS...
如何修改Vue打包后文件的接口地址配置的方法
01-19
1、背景 常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中，涉及到私有化部署，就是对应的生产环境的地址，不是唯一的。如果每次都修改一个地址，再打包文件进行部署，过程繁琐且低效。那么如何把环境地址设置成可配置的，不需要再构建代码就能直接生效呢？ 2、可选方案 进行了调研后，网上介绍的方案有2种： 1）在static上设置一个config.js，把配置的参数设置成 window 下的全局变量。这种方案的确可行，但是，但是，不安全！！！ 如果请求地址被恶意修改，后果不太好~ 2）使用
前端打包之后的文件 想修改某些变量 如何做？比如请求地址的修改
u014105739的博客
11-03 2074
前端打包之后的文件 想修改某些变量 如何做？比如请求地址的修改
Vue解决打包后如果需要修改后台连接地址需要重新打包问题
2401_84138986的博客
04-16 434
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？在index.html文件中添加一段js代码，把后台请求的url配置到全局。描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？在请求的时候判断一下，如果是生产环境，就是用全局的URL。Vue 的 nextTick 的原理是什么？组件中写 name 选项有什么作用？Vue 中 key 值的作用？Vue 组件间通信有哪些方式?vue 中怎么重置 data?Vuex 有哪几种属性?虚拟 DOM 实现原理。Vue 双向绑定原理。
java前端页面修改配置文件_Java 用户资料完整度的前端显示（实现）
weixin_42361026的博客
03-01 730
正文前边也说了，我这里采用的是第一种方案，前端使用 Bootstrap 的进度条组件显示百分比，后台读取权重并计算信息完整度，并将计算的结果返回给前端，供页面显示。方案很简单，下面具体来看代码。前端CSSJS$(function(){//加载页面时，动态读取个人资料完整度$.ajax({async:false,url:'getInfoDegree.do',type:'POST',da...
导出新项目后需要修改的几个配置文件及其他配置文件用处
caoyong820的专栏
08-14 286
111
vue打包后，用js更新部分功能及内容
这是个问题
08-28 596
修改DOM内容 document.getElementById('app').innerHTML='<div>uiuiuiuiui</div>'
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值