vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图:

  写法:  

    

  错误:

    

  会无端多出一个“/css/static/” 这样就会使路径错误;

  解决办法:

     办法一:

        把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径;

        具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译)

     办法二:进行wepack配置:

        第一步:

        

        第二步:

        

        第三步:

        

然后  npm run build 运行打包就OK了

  具体原因:自己研究,拜拜!!周五快乐!!!!!!

vue cli 打包项目造成css背景图路径错误的更多相关文章

  1. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  2. vue 打包的项目当背景图路径错误

    当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',

  3. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  4. Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题

    [解决方法]: 更改build/utils.js文件中的 ExtractTextPlugin 的 options配置. if (options.extract) { return ExtractTex ...

  5. vue.js 打包时出现空白页和路径错误

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...

  6. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  7. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  8. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

  9. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

随机推荐

  1. P4316 绿豆蛙的归宿(期望)

    P4316 绿豆蛙的归宿 因为非要用bfs所以稍微麻烦一点qwq(大家用的都是dfs) 其实问题让我们求的就是经过每条边的概率*边权之和 我们可以用bfs把图遍历一遍处理概率,顺便把每条边的概率*边权 ...

  2. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果!

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  3. listen()函数中backlog参数分析

    实例分析1 将服务器端的listen函数backlog设置为2,用20个客户端与服务器建立连接,查看连接的建立情况. 服务器代码: #include <stdio.h> #include& ...

  4. oracle 12.2 linux/solaris正式发布

    oracle 12.2 linux/solaris正式发布,可以从http://www.oracle.com/technetwork/database/enterprise-edition/downl ...

  5. Kali系列之aircrack-ng wifi密码穷举

    kali linux安全渗透 网卡:rtl8187 工具aircrack-ng 操作+ 查看无线网卡信息 ifconfig 或者 iwconfig 有个是wlan0的就是您的外置无线网卡 启动网卡监听 ...

  6. Ubuntu + CUDA9 + CUDNN7 + OpenCV3.4 + contrib +CAFFE-master

    安装ubuntu时赞美Rufus(建议ubuntu16.04.04),过程参考 https://www.cnblogs.com/willnote/p/6725594.html 安 装 前 一 定 要 ...

  7. Base64编码为什么会使数据量变大?

    当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大,为何呢?这里就得先探究一下什么是Base64编码. Base64编码的思想是是采用64个基 ...

  8. 【做题】Codeforces Round #453 (Div. 1) D. Weighting a Tree——拆环

    前言:结论题似乎是我的硬伤…… 题意是给你一个无向图,已知连接到每一个点的边的权值和(为整数,且属于区间[-n,n]),需要求出每条边权值的一个合法解(都要是在区间[-2*n^2,2*n^2]内的整数 ...

  9. hihoCoder week8 状态压缩·一

    状态压缩  写了两个半小时  太菜了 题目链接 https://hihocoder.com/contest/hiho8/problem/1 #include <bits/stdc++.h> ...

  10. [CodeForces - 276A] Lunch Rush

    题目链接:http://codeforces.com/problemset/problem/276/A 从这n个输入中求最大值,注意 和 k的比较,定义一个maxn,对每个输入进行计算即可. AC代码 ...