问题描述

一般情况下，通过webpack+vue-cli默认打包的css、js等资源，路径都是绝对的

但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。

解决办法

打开webpack.prod.conf.js

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

那么这样后，资源的引用路径就正确了。

当然在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用。

背景图片的引用问题

上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像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

那么就需要修改build文件夹下的utils.js代码，如图所示：

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

最后感谢风雨后见彩虹的文文^_^

vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用的更多相关文章

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

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

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

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

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

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

  4. webpack+vuecli打包常见的2个坑

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

  5. vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

    .bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...

  6. vue-cli打包后dist文件运行空白和背景图显示问题详解

    1.文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. ...

  7. vue.js - 解决vue-cli打包后自动压缩代码

    一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...

  8. 记webpack下进行普通模块化开发基础配置（自动打包生成html、多入口多页面）

    写本记时(2018-06-25)的各版本 "webpack": "^4.6.0"  //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...

  9. vue打包静态资源路径不正确的解决办法【转】

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...

随机推荐

  1. oracle恢复已经删除的数据

    insert into tablerestore select * from tablerestore as of timestamp to_Date('2014-8-8 15:00:00','yyy ...

  2. java代码评审内容

    评审内容 u 工具检查 □  Eclipse警告 □  FindBug □  CheckStyle □  Jupiter □  Subclipse 或者Subversive u 代码注释内容(详细参考 ...

  3. Rate Monotonic Scheduling algorithm

    这篇文章写得不错 http://barrgroup.com/embedded-systems/How-To/RMA-Rate-Monotonic-Algorithm 另外rtems的官方文档也有类似说 ...

  4. JavaScrip函数与声明表达式

    首先我们看下函数的两种命名方式 1.函数声明,声明一个函数 function test1(){ var a=0; console.log(a); //左一些操作... } 执行结果如下 我们看一下,无 ...

  5. leetCode 90.Subsets II（子集II） 解题思路和方法

    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...

  6. Java线程：概念及原理

    线程是执行的程序中的一个线程. Java虚拟机允许应用程序必须同时运行多个执行线程. 每个线程都有一个优先事项.具有更高优先级的线程优先于线程的优先级较低的执行.每个线程可能会或可能不会也被标记为一个 ...

  7. IOS开发之----异常处理

    本文转载至 http://blog.csdn.net/chenyong05314/article/details/7906593 转载自:http://blog.sina.com.cn/s/blog_ ...

  8. python中装饰器你真的理解吗？

    def w1(func): print('装饰器1....') def w1_in(): print('w1_in.....') func() return w1_in def w2(func): p ...

  9. $CLASS('page__hd')[0].style.backgroundColor="red"

    const $ID = (p) => document.getElementById(p)const $CLASS = (p) => document.getElementsByClass ...

  10. 题解 P3805 【【模板】manacher算法】

    题解 P3805 [[模板]manacher算法] 我们先看两个字符串: ABCCBA ABCDCBA 显然这两字符串是回文的 然而两个串的对称中心的特性不同,第一个串,它的对称中心在两个C中间,然而 ...