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

最新推荐文章于 2024-09-13 14:55:21 发布
最新推荐文章于 2024-09-13 14:55:21 发布
阅读量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 139
前言： 我们的vue代码打包上传到服务器之后， 要是数据接口 以后换了域名什么的，是不是需要重新去vue文件里修改接口。 能不能生成一个配置文件，里面可以配置域名或其它什么字段之类的，这样以后换了域名，只需打开记事本 修改一下域名即可。 教程： 第一步：安装generate-asset-webpack-plugin插件 npm install --save-dev...
vue2 webpack打包配置
最新发布
m0_46159356的博客
09-13 665
webpack打包后出现的问题以及解决方案
Vue项目打包需要修改的地方（适用于webpack4.0 亲测，可用）
CSDN_920227的博客
09-10 673
需要修改以下几个文件 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 111
原文地址：https://blog.csdn.net/xiaojun_yuan/article/details/79460484 用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，but，难道我们只是改个接口地...
vue打包之后更改配置的json文件无效
派大星球
08-20 2913
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...
前端打包之后的文件 想修改某些变量 如何做？比如请求地址的修改
u014105739的博客
11-03 2099
前端打包之后的文件 想修改某些变量 如何做？比如请求地址的修改
Vue解决打包后如果需要修改后台连接地址需要重新打包问题
2401_84138986的博客
04-16 453
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 745
正文前边也说了，我这里采用的是第一种方案，前端使用 Bootstrap 的进度条组件显示百分比，后台读取权重并计算信息完整度，并将计算的结果返回给前端，供页面显示。方案很简单，下面具体来看代码。前端CSSJS$(function(){//加载页面时，动态读取个人资料完整度$.ajax({async:false,url:'getInfoDegree.do',type:'POST',da...
导出新项目后需要修改的几个配置文件及其他配置文件用处
caoyong820的专栏
08-14 294
111
vue打包后，用js更新部分功能及内容
这是个问题
08-28 610
修改DOM内容 document.getElementById('app').innerHTML='<div>uiuiuiuiui</div>'
vue设置全局配置文件，打包后在dist包内可动态修改配置
weixin_43485503的博客
07-14 6508
vue设置全局配置文件，打包后在dist包内可手动修改配置文件
Vue3 配置config文件，打包后随意修改配置，无需重新打包和重启
Admans的专栏
11-22 4283
在public目录创建config.json文件，名字随便起。刷新页面后即显示新的内容。打开main.js，导入。
webpack4深度解析：打包Vue前端多页面项目
"webpack4打包vue前端多页面项目" 在现代前端开发中，Webpack 是一个强大的模块打包工具，常用于处理 JavaScript、CSS 和其他静态资源。本文将深入探讨如何使用 Webpack 4 打包 Vue.js 的多页面项目，这对于理解和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值