vue修改config后怎么生效_vue+elementUI修改样式不生效的解决过程

最新推荐文章于 2023-09-23 19:02:48 发布
最新推荐文章于 2023-09-23 19:02:48 发布
阅读量563 收藏
点赞数
文章标签： vue修改config后怎么生效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39568172/article/details/114009097
版权
在一次学校大作业的前端开发中，作者使用Vue和ElementUI实现页面，遇到el-input样式居中无效的问题。原因是CSS样式被添加到input外层的div上，而非input元素本身。通过使用/deep/选择器穿透组件样式，成功让样式生效。这是一个关于Vue组件样式穿透和ElementUI定制样式的实践案例。
摘要由CSDN通过智能技术生成

学校大作业，我负责的前端部分，正好前段时间学习了vue和elementUI，就来实践一下，部分代码如下：

......

后来我发现在el-input舔加样式使文字居中但并没有生效

......

......

.ip{

text-align:center

}

......

62b62c0afea1ac2cfe73c6a308eb7a19.png

在浏览器里渲染成这样

85efd1ccb786b2129e77d64f3298f439.png

可以看到渲染的时候在input外套了个div元素，我加在el-input的ip这个class也是在这个div元素上，input元素则是el-input__inner这个class

div为父组件，input为子组件,vue里可以看到

而以上可以看到我们的原本加在el-input的名为ip的class渲染到了父组件div上，这也就是为什么添加样式无法生效的原因

所以修改代码如下(可以将/deep/换成>>>)

......

......

.ip /deep/ .el-input__inner{

}

......

重新运行样式就生效了

20210110152317298.png

weixin_39568172
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue修改config后怎么生效_vue.js - 实际项目运用中，webpack对需要在部署后可修改的配置文件如何打包...
weixin_39732640的博客
12-20 488
问 题初学者。用Vue开发前端，webpack打包。在实际应用中，对于一些需要在部署到服务器后可能需要修改的配置项，一般是怎么操作的？打个比方，前端vue中需要调用的服务webAPI的url，写在配置变量APIURL中，我看教程和网上的例子，建议做法是在config木料下的prod.env.js 和dev.env.js里面去分别指定APIURL，可以达到开发和部署不用频繁手动修改url的目的。但是...
vue修改config后怎么生效_记录vue.config设置alias无法生效的一次问题排查
weixin_39675926的博客
12-20 2106
昨晚把Node和Vue-CLI等工具都升级到了最新版，create了一个新项目，因为之前干活的时候为了方便都是拷贝之前的配置文件下来，很多东西都是基于旧版的解构，所以想针对新版本也处理一份配置，于是只拿了vue.config.js来到新项目这边。基本都没什么问题，直到我在main.js准备引入一个常用的配置文件的时候，控制台报错了！出现这个提示还是蛮明显的，因为@js是我设置的一个别名，对应的路径...
vue项目中node_modules内容修改并且永久生效（Popup弹出层组件）
weixin_59717072的博客
03-15 1784
vue中node_modules内容修改保存生效，Popup弹出层组件
vue修改config后怎么生效_vue组件中修改样式怎么不生效？
weixin_39863918的博客
12-20 668
vue组件中修改样式怎么不生效？下面本篇文章给大家介绍一下vue组件修改样式不起作用的解决方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue组件修改样式不起作用需要在全局样式文件去定义，在组件里无法修改样式在全局定义样式文件在main.js中引入import '@/styles/index.scss' // global css//to reset element-ui ...
vue修改config后怎么生效_vue.config.js 配置无效？
weixin_30271235的博客
01-12 1335
料青山看我应如是...写错了正确写法：constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}module.exports={lintOnSave:true,//生产环境是否生成sourceMap文件productionSourceMap:...
为VUE项目提供部署后仍可修改的配置文件
左直拳的马桶_日用桶
10-09 2539
将配置文件放在public/下（如果是vue2.，放在/static/下）* 前后端分离，前端代码码也像后端一样编译、发布，再也不是以前那种完完全全的静态文件了。这就为代码复用，模块式开发带来了便利，不过有一些问题。比如配置文件，发布时也会被编译、打包，部署之后就再也找不到，更别说修改了。只能在打包前设置好，这样就失去了配置的意义。 那应该如何提供配置文件，使得前端在部署后，仍然可以手动修改呢？ 以vue3.*为例。很简单的，在public/下提供一个config.js，然后在public/index.ht
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
解决Vue打包上线之后部分CSS不生效的问题
10-16
完成上述修改后，重新运行Vue的打包命令（例如 `npm run build`），将新打包的代码上传至服务器。这样，大部分情况下，由于CSS处理引发的问题应该已经得到解决。 需要注意的是，有时候问题可能出在具体的CSS选择器...
vue-cli设置css不生效的解决方法
10-15
然而，有时候我们在使用 Vue CLI 创建的项目中可能会遇到 CSS 样式不生效的问题。这个问题通常与项目的构建配置，特别是 webpack 配置中的 loader 设置有关。 Vue CLI 的 webpack 配置文件，如 `webpack.base....
vue打包之后更改配置的json文件无效
派大星球
08-20 2856
vue打包之后更改配置的json文件无效 坑……在vue项目，给public底下放置了一个静态的config.json文件，用来配置代理ip地址和系统的标题等相关配置，以便于在部署时进行相关更改，但是在部署时只有更改ip配置生效。具体问题如下： public下添加的config.json文件 vue.config.js文件中引入json文件，并设置配置的代理ip 登录页面引入json文件，并使用配置标题 打包之后的json文件 然后坑就出现了，在打包之后，更改打包后的json配置的ip地址生效
vue修改config后怎么生效_Vue项目创建build后可修改的配置文件
weixin_36324426的博客
12-30 2109
需要一个配置文件，能在项目打包(build)时不被打包，方便修改，同时项目刷新时读取改配置。实现方法如下：1.在项目的static目录下创建project.config.json文件(名称随意，建议带上config关键字，易于辨识)内容为json格式：1 {2 "serviceUrl": "http://localhost:30001/service/api/",3 "baseUrl": ...
vue.config.js配置不生效_ASP.NET Core 配置源：实时生效
weixin_39728544的博客
12-01 233
在之前的文章 ASP.NET Core 自定义配置源 和 ASP.NET Core etcd 配置源 中主要是介绍如何实现自定义的配置源，但不论内置的和自定义的配置源，都会面临如何使配置修改后实时生效的问题(修改配置后在不重启服务的情况下能马上生效)。在 ASP.NET Core etcd 配置源 的最后部分其实有用到 IOptionsSnapshot Options 快照的方式获取到最...
vue项目发布后文件未生效
Roriring的博客
05-22 5523
修改的项目源代码没有生效（vue，js，css） 解决方案：在build文件夹下webpack.prod.conf.js文件中生成一个时间戳，在输出文件后面加上时间戳，使每次生成最新的文件 如果还存在有文件（非源代码）没有更新 解决方案：使用clean-webpack-plugin (注意使用稳定版本) 作用：将指定的出口文件夹下的文件全部删除 1.npm install -D clean-webpack-plugin@3.0.0 2.在build文件夹下webpack.prod.conf.j.
Vue在public文件夹下配置全局变量时，刷新页面失效
weixin_45283339的博客
03-08 2472
在public文件下定义全局变量， 在接口服务中使用 npm run build 后生成的dist包， 可以直接对config.js文件修改部署不同的环境 ，避免多次打包 1、在public文件夹下 配置全局 config.js 文件 文件内容如下： var CONFIG = {} CONFIG.name = 'Jack' 2、在 同级 index.html文件 引入 <script src="./config.js"></script> 3、在页面上使用 let name =
VUE项目打包之后修改配置文件（包括后台地址，图片公共路径等）
weixin_42634040的博客
09-08 3381
本文是在借鉴了vue实现分环境打包步骤 https://blog.csdn.net/zuoyiran520081/article/details/80812788 的基础上实现了自己想要的效果：打包后可以修改地址 项目目录及需要修改的文件如下图 首先修改config配置文件 修改config内的dev.env.js文件： 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') mo
vue3项目发布后修改配置文件仍然生效
最新发布
左直拳的马桶_日用桶
09-23 904
使用json，并且要用ajax来加载；应用过程中也有一些注意的问题。有关“vue3项目发布后修改配置文件仍然生效”问题，之前做过一篇笔记。但事实上，那篇笔记的步骤，只解决了项目发布后，配置文件没有被压缩，仍然可见可编辑的问题；但配置文件编辑保存后，并没有生效，也就是说，改了也是白改，一点意义都没有。那篇笔记中，配置文件是js文件，使用import的方式。结果项目发布后，估计打包程序做了处理，直接将里面的内容读出来，内联到每个使用它的组件中去了，所以后面再改配置文件不会起作用。
Visual Studio Code前端vue项目修改后不生效问题
A5d4gpjvbbkv的博客
08-31 2738
VScode需要ctrl+s!!!
Vue webpack打包后可以直接修改配置文件
weixin_48205715的博客
11-10 1079
1.创建新的js配置文件 放在public目录下，防止js文件被打包编译 2.js配置文件里将变量参数赋值window全局 3.在public/index.html导入该js配置文件 4.最后在需要用到得地方直接window.名称即可 亲测有效 这样就不用每次需要修改配置时再重新打包 ...
Vue-cli3 通过配置 public 目录下的 config.js 和config.json 实现一次编译，修改生效
u014212540的博客
11-21 4203
Vue-cli3 通过配置 public 目录下的 config.js 和config.json 实现一次编译，修改生效
vue.config.js配置 不生效
09-05
根据引用[3]的内容，当使用`vue-cli-service serve`命令启动项目时，会使用`vue.config.js`进行配置；而使用`webpack-dev-server`命令启动项目时，默认会使用`webpack.config.js`进行配置。因此，如果`vue.config.js`的配置在启动项目时不生效，可以检查一下使用的启动命令是否正确，确保使用的是`vue-cli-service serve`命令。另外，还需要检查一下脚本启动项是否正确设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue学习笔记 —— 关于vue.config.js不生效的解决方案](https://blog.csdn.net/qq_33638188/article/details/125343763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值