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

1.修改资源引用相对路径，打开build/webpack.prod.conf.js

找到27行  output:增加publicPath:'./',如图：

当然在config文件夹下的index.js中修改 

assetsPublicPath:'./'

同样也可以达到资源的相对引用。

2.修改css资源引用的相对路径，打开build/utils.js，找到以下位置

增加 publicPath: '../../' 即可

打包后即可以放到任何目录下了。

[Vuejs] webpack+vue-cli打包如何引用相对路径的更多相关文章

  1. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. 解决webpack vue 项目打包生成的文件，资源文件均404问题

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...

  4. 手把手教你如何安装使用webpack vue cli

    1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...

  5. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  6. vue项目打包后的资源路径问题

    最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...

  7. vue打包空白及字体路径错误问题

    vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...

  8. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  9. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

随机推荐

  1. Linux下安装启动多个Mysql

    网上找了N多资料,没有一个可以顺利成功的,郁闷,可能是水平有限吧...!本人经过不断的研究.测试,完整实现Linux下启动两台MySQL,而且对mysql有了更深入的了解...废话不多说,走着! 步骤 ...

  2. swift -inout关键字

    一般参数仅仅是在函数内可以改变的,当这个函数执行完后变量就会被销毁,不会有机会改变函数以外的变量,那么我们就会产生一个疑问,我们可不可以通过一个函数改变函数外面变量的值呢?答案是肯定的,这时我们就需要 ...

  3. 关于流量升高导致TIME_WAIT增加，MySQL连接大量失败的问题

    有个应用就是每次都会去查一个接口,接口返回用户的信息数据,从而展现不同的页面效果.大致流程如下 应用APP(电信)-> memcache ->电信custom接口 ->master- ...

  4. xml 转 数组

    function xml_to_array($xml){ if(!$xml){ return false; } //将XML转为array //禁止引用外部xml实体 libxml_disable_e ...

  5. mybatis中文官网

    http://www.mybatis.org/mybatis-3/zh/index.html

  6. C[a,b]向量空间中的函数的线性相关性

  7. dj 用户认证组件

    auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,主要的三个: 1.1 authenticate() 提供了用户认证 ...

  8. mouseover和mouseout事件的相关元素

    在发生mouseover和mouseout事件时,还会涉及更多的元素,这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内.对mouseover事件而言,事件的主目标获得光标元素 ...

  9. python科学计算模块NumPy

    NumPy是Numerical Python的简称,是高性能科学计算和数据分析的基础包.其实NumPy 本身并并没有提供太多的高级的数据分析功能, 但是理解NumPy数组以及面向数组的计算将有利于你更 ...

  10. php输出语句

    看不懂? 抄一遍代码吧. echo 和 print 在 PHP 中有两个基本的输出方式: echo 和 print echo 和 print 区别: echo - 可以输出一个或多个字符串 print ...