zoukankan      html  css  js  c++  java
  • 解决vue+elementui项目打包后样式变化问题

    最近在搭建一个vue+ElementUI+Vuex项目,打包时发现了有几个问题,解决后特地记录一下,以免下一次有遇到类似的问题。

     问题一

    1.页面一片空白并报错Failed to load resource: net::ERR_FILE_NOT_FOUND 

    第一次打包后发现页面一片空白,并且报错Failed to load resource: net::ERR_FILE_NOT_FOUND 

    然后上网发现更改一下配置就行了。

    1.webpack.prod.conf.js 中output添加参数publicPath:'./'

     2.修改webpack.base.conf.js中:

    publicPath: process.env.NODE_ENV === 'production'
    
    ? './' +config.build.assetsPublicPath
    
    : './' + config.dev.assetsPublicPath

    3.如果还有问题:找到config文件里面的index.js文件
    修改build里面的assetsPublicPath;

     我是第三步本来就已经是这样设置的所以,第三步没有更改。

    然后打包,页面就不再是一片空白了。

    但是有出现了新的问题,发现部分Element UI 样式失效,如下图,icon变成方框了

     解决办法:在build文件夹下找到utils.js,加上一行publicPath:'../../'

     

    然后再打包,打开index.html文件就能看到图标正常显示啦。

    问题二

    vue+elementui项目打包后,我发现打包整体样式没有问题,局部页面样式样式变成了elementui自带的样式,自己在组件里修改过的样式没有生效。
    问题原因: main.js中的引入顺序决定了打包后css的顺序,如果先引入router,后引入第三方组件的话,第三方组件样式可能就会将组件内的样式覆盖。
    解决办法: 调整引入顺序,先引入第三方组件,再引入router,就能实现组件样式在第三方样式之后渲染。

    代码如下:
    main.js
    
    import Vue from 'vue'
    import App from './App'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import router from './router'
    import Axios from 'axios'
  • 相关阅读:
    C# String.Format用法和格式说明
    VS2017桌面应用程序打包成.msi或者.exe
    Mysql授权允许远程访问
    C# Winform频繁刷新导致界面闪烁解决方法
    C# 解决窗体闪烁
    C# winform或控制台Properties.Settings.Default的使用及存储位置
    C# 获取计算机cpu,硬盘,内存相关的信息
    C# 多线程多文件批量下载---子线程中更新UI 实例
    Objective-C:NSSet和NSMutbaleSet的用法
    iOS:App上架流程和支付宝支付流程
  • 原文地址:https://www.cnblogs.com/liang715200/p/14791866.html
Copyright © 2011-2022 走看看