解决Vue打包上线之后部分CSS不生效的问题
首先注释掉webpack.prod.conf.js中下面的代码
new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }),
然后在utils.js中添加, minimize:true
const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, minimize:true } }
然后重新打包传到线上,解决!
以上这篇解决Vue打包上线之后部分CSS不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里
-
解决vue-cli 打包后自定义动画未执行的问题
在vue项目中,想实现无缝向上滚动的自定义动画效果 webpack 打包后动画未执行,就是你npm run build生成的dist中动画未生效 @-webkit-keyframes move { 0%{ top:0; } 100% { top:-500px; } } 解决方法:在vue项目中找到build文件夹下的vue-loader.conf.js,将extract:isProduction 改为extract:false 自定义动画就会生效了 以上这篇解决vue-cli 打包后自定义动画未
-
解决vue打包之后静态资源图片失效的问题
1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同
-
vue-cli2打包前和打包后的css前缀不一致的问题解决
啰嗦一哈 最近基于vue-cli2 学习webpack,将vue-cli2的webpack配置强撸了一遍,感觉身体已被掏空...但还是收获不少的,起码掌握了webpack的一些基本套路.开发环境和生产环境的概念.根据不同的环境写不同的webpack配置.和一些常用插件的用法等. 问题来了 基于vue-cli不用自己配置webpack开撸项目是十分爽的,但当我在撸得正爽的时候发现一个问题,就是项目打包前和打包后的css前缀不一致的,如下(浏览器:Chrome): --给app.vue下的img添加
-
解决Vue打包上线之后部分CSS不生效的问题
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加, minimize:true const cssLoader = { loader: 'css-loader', option
-
解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路径成了却出现404访问不到的问题. 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is speci
-
解决Vue打包之后文件路径出错的问题
这里以vue-cli创建的项目为例 1.文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 2.背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可. 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个
-
解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j
-
解决vue 打包发布去#和页面空白的问题
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown
-
解决vue打包 npm run build-test突然不动了的问题
今天遇到一件很奇葩的事情 输入npm run build-test 突然停在这不动了 what? 不动了?! 后来google了一下 大家都是人才 运行一下这句话 就动了!! npm config set registry http://registry.cnpmjs.org 补充知识:vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题 vue项目要进行unit和e2e常见问题 localStorage is not available
-
解决vue打包项目后刷新404的问题
vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu
-
解决vue打包后vendor.js文件过大问题
第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js
-
解决vue打包报错Unexpected token: punc的问题
项目中有一个功能模块是使用Vue写的,然后蛋疼的来了,写Vue的同事走了,今天需要改,懵逼状态啊,这是什么?代码还没看懂,就给我出了一个Exception.记录一下,蛋疼历程. ERROR in static/js/app.33254a875dd731a0b538.js from UglifyJs Unexpected token: punc (() [./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19] 好
随机推荐
- Linux中Oracle启动侦听报错TNS:permission denied的解决方法
- go语言里包的用法实例
- C++常量详解一(常量指针与常量引用的初始化)
- 给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
- 基于python实现微信模板消息
- 在Linux系统中安装Go语言的详细教程
- PHP中抽象类、接口的区别与选择分析
- js判断输入字符串是否为空、空格、null的方法总结
- 分享PHP函数实现数字与文字分页代码
- IIS配置网站定时任务必设参数图文教程
- 关于木马群cmdbcs.exe,wsttrs.exe,msccrt.exe,winform.exe,upxdnd.exe等的清除方法第1/2页
- Android Apk去掉签名以及重新签名的方法
- Android内存优化杂谈
- 通过一个简单的例子学会vuex与模块化
- mysql 5.7.18 MSI安装图文教程
- java解析xml的4种方式的优缺点对比及实现详解
- Python提取PDF内容的方法(文本、图像、线条等)
- Kotlin中关于内联函数的一些理解分享
- vue通过指令(directives)实现点击空白处收起下拉框
- python用fsolve、leastsq对非线性方程组求解