第一个坑： 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。

解决办法

打开webpack.prod.conf.js

找到output：增加 publicPath: './', 即可，如图。

背景图片的引用问题

webpack打包在会把图片转换成base64，在设置里面，limit超过10000就不会转换，不管事调大limit还是压缩图片都不能很好的满足需求。

上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，背景图片资源是通过css加载的，如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：

url(../../static/img/logo-index.2f00bf2.png) no-repeat

　　添加如图所示的一行代码，这样不论是字体还是图片的引用问题都能解决。

来源https://www.cnblogs.com/moqiutao/p/7496718.html

webpack+vuecli打包常见的2个坑的更多相关文章

  1. [Vuejs] webpack+vue-cli打包如何引用相对路径

    默认情况下通过webpack+vuec-li打包的css.js等资源,路径都是绝对的,即static在根目录下,假如部署到带有文件夹目录的项目中,资源路径就会出错,如何解决. 1.修改资源引用相对路径 ...

  2. [整理] webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用 https://www.cnblogs.com/moqiutao/p/7496718.html

  3. webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  4. vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  5. webpack + vuecli多页面打包基于（vue-template-admin）修改

    转: webpack + vuecli多页面打包基于(vue-template-admin)修改 遇见的问题TypeError: Cannot read property 'tap' of undef ...

  6. express整合webpack的打包文件dist

    对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...

  7. npm webpack vue-cli

    npm.webpack.vue-cli 快速上手版   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chro ...

  8. webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】

    首先介绍传统模块化开发的主流方案: 1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用.用时才定义,就近加载. 2.基于AMD的require.js,之前在用.提前声明与定义.国 ...

  9. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

随机推荐

  1. java 日期validate

    public static boolean isValidDate(String str) { boolean convertSuccess=true; // 指定日期格式为四位年/两位月份/两位日期 ...

  2. [Codeforces #190] Tutorial

    Link: Codeforces #190 传送门 A: 明显答案为$n+m-1$且能构造出来 #include <bits/stdc++.h> using namespace std; ...

  3. [Agc008F]Black Radius

    [AGC008F] Black Radius Description 给你一棵有N个节点的树,节点编号为1到N,所有边的长度都为1 "全"对某些节点情有独钟,这些他喜欢的节点的信息 ...

  4. BZOJ 4027：[HEOI2015]兔子与樱花（贪心+树形DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4027 [题目大意] 樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1 ...

  5. CodeForces 380C Sereja and Brackets（扫描线+树状数组）

    [题目链接] http://codeforces.com/problemset/problem/380/C [题目大意] 给出一个括号序列,求区间内左右括号匹配的个数. [题解] 我们发现对于每个右括 ...

  6. [xsy2289]B

    题意:给一棵树,一次操作定义为删掉一条树边再加一条边,并且满足加完边后这还是一棵树,问在进行不超过$k$次操作后能构造出多少种不同的树 首先...矩阵树定理在边有边权的时候同样适用,这时可以把它看成重 ...

  7. 【后缀自动机】poj1509 Glass Beads

    字符串最小表示 后缀自动机 O(n) 把串复制一次,链接在后面之后,建立SAM,贪心地在SAM上转移,每次贪心地选择最小的字符,转移的长度为n时停止. 输出时由于要最靠前的,所以要在endpos集合中 ...

  8. bzoj 2665: [cqoi2012]编号

    题目中说任意两个数至少要有3个位上数不相同,那么其实也就是从7个数中选出5个这样任意的组合全部不同,用数组f[i][j][k][l][m][n]记一下就好了,i为第几种组合,一共C(7,5)种,最后爆 ...

  9. 记录numpy和c++的混合编程

    准备记录numpy和c++的混合编程 #include <boost/python.hpp> #include <numpy/ndarrayobject.h> namespac ...

  10. shell-网上lnmp一键安装讲解

    shell-网上lnmp一键安装讲解 #!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/b ...