zoukankan      html  css  js  c++  java
  • vue 开发环境正常打包之后背景图片无法访问或者element-ui的icon找不到

    在项目中会遇到开发环境和正式环境访问效果不一样,例如开发环境可以正常访问但是打包之后放到服务器上,图片居然访问不到了等等。。。。

    对于以上问题提供两种解决方案:

    第一:对于背景图片访问不到的情况,如下这种写法在打包正式环境下是无法访问的,

    .login {
             100%;
            height: 100%;
            background: url("../assets/el_login_bg.jpeg") no-repeat center;
            background-size: 100% 100%;
        }

    对于以上的情况(css)来说可以通过webpack配置解决,如下:找到build文件夹下的webpack.base.conf文件

    第二:对于js中引入的图片,例如配置动态的导航中的icon图片。

    在开发环境中我们可以 icon: "../../xxx" 来引入,此时访问完全没有问题,但是一旦放到正式环境icon就访问不到了

    此时可以通过node中的require("../../xxx")来访问,打包之后就完全没有问题了。

    第三:对于element-ui来说,开发环境下边icon可以正常访问,正式环境下就废了,解决方案如下:

    找到build文件夹下的utils文件加如下配置:

    同时在config文件夹下的index文件中找到 assetsPublicPath 并将之前的 "/" 改成 "./"。

    以上方法就是解决在项目中无法访问背景图以及element-ui 的icon无法访问的解决方案

     
  • 相关阅读:
    Codeforces 474B. Worms
    Codeforces 577A
    Codeforces 455A
    Codeforces 540A
    Codeforces 832A. Sasha and Sticks
    51Nod 1137 矩阵乘法
    51Nod 1118 机器人走方格
    Tomcat部署项目的三种方式
    【Linux】CentOS7下安装JDK详细过程
    Linux上安装rz和sz命令
  • 原文地址:https://www.cnblogs.com/little-baby/p/14289670.html
Copyright © 2011-2022 走看看