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. Android之单元测试及数据库操作

    一.安卓下的单元测试1.创建一个单元类,继承超类AndroidTestCase2.在AndroidManifest.xml配置清单中配置以下两点首先在manifest节点下添加节点instrument ...

  2. bash 特性

    命令hash: 缓存此前命令的查找结果:key-value key:搜索键 value:值

  3. QML中打印

    1.console.log("123"); 2.console.log("a is ", a, "b is ", b); 3.打印代码块时间 ...

  4. Bootstrap3基础 input-group glyphicon 输入框组与glyphicon图标

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. upc组队赛1 过分的谜题【找规律】

    过分的谜题 题目描述 2060年是云南中医学院的百年校庆,于是学生会的同学们搞了一个连续猜谜活动:共有10个谜题,现在告诉所有人第一个谜题,每个谜题的答案就是下一个谜题的线索....成功破解最后一个谜 ...

  6. fedora23 桌面工具栏fedy, 桌面美化 allow: 2'lau不是2'l2u

    ## Sudoers allows particular users to run various commands as ## the root user, without needing the ...

  7. Spring Security原理与应用

    Spring Security是什么 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置 ...

  8. R t-test cor.test

    a = c(175, 168, 168, 190, 156, 181, 182, 175, 174, 179)b = c(185, 169, 173, 173, 188, 186, 175, 174, ...

  9. P4450 双亲数

    思路 同zap-queries 莫比乌斯反演的板子 数据范围小到不用整除分块... 代码 #include <cstdio> #include <algorithm> #inc ...

  10. (转载)一张表搞清楚西门子S7系列标准DB块与优化DB块

    在TIA Portal中为S7-1200/S7-1500 CPU 添加一个 DB 块时,其缺省属性为优化的 DB ,优化的 DB 块与标准的 DB 块整体对比如下表所示: 项 标准 DB 优化 DB ...