默认情况下通过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. canvas和图片互转

    原文:http://www.jb51.net/html5/160920.html 这么神奇么?先记录一下. 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的d ...

  2. 求和(NOIP2015)

    题目链接:求和 这道题不是很简单,因为数据并不是很小,常规计算会t. 这里引用chenleyu的解答(如果想要cgg原创解答,--改天吧): 这题相对是比较难的,首先我们要解读题目的意思 一条狭长的纸 ...

  3. 【转】Linux修改SSH端口和禁止Root远程登陆

    Linux修改ssh端口22 vi /etc/ssh/ssh_config vi /etc/ssh/sshd_config 然后修改为port 8888 以root身份service sshd res ...

  4. 2018.11.01 NOIP训练 cost数（搜索+容斥原理）

    传送门 唉考试的时候忘记剪倍数的枝了666666分滚粗. 其实就是一直取lcmlcmlcm搜索,然后容斥原理统计就行了. 代码

  5. java Concurrent包学习笔记（六）：Exchanger

    一.概述 Exchanger 是一个用于线程间协作的工具类,Exchanger用于进行线程间的数据交换,它提供一个同步点,在这个同步点,两个线程可以交换彼此的数据.这两个线程通过exchange 方法 ...

  6. 深度优先搜索DFS和广度优先搜索BFS

    DFS简介 深度优先搜索,一般会设置一个数组visited记录每个顶点的访问状态,初始状态图中所有顶点均未被访问,从某个未被访问过的顶点开始按照某个原则一直往深处访问,访问的过程中随时更新数组visi ...

  7. 张奎师弟参与devexpress chartControl绘图--解决了devexpress的chartControl控件不能添加系列的问题

    using DevExpress.XtraCharts; using System; using System.Collections.Generic; using System.ComponentM ...

  8. 20155205 2016-2017-2 《Java程序设计》第3周学习总结

    20155205 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 定义类的两种方法(new和this的用法) 只要有一个类定义,编译程序就会产生一个. ...

  9. Ng第十一课：机器学习系统的设计(Machine Learning System Design)

    11.1  首先要做什么 11.2  误差分析 11.3  类偏斜的误差度量 11.4  查全率和查准率之间的权衡 11.5  机器学习的数据 11.1  首先要做什么 在接下来的视频将谈到机器学习系 ...

  10. 适配android和iOS上position:absolute和input问题

    //适配android上absolute和input的问题var oHeight = $(document).height(); //屏幕当前的高度$(window).resize(function( ...