默认情况下通过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. lambda表达式和表达式树（深入理解c#）

    1.Lambda形式 1). Lambda表达式最冗长的形式: (显式类型的参数列表)=>{语句} 2). 大多数时候,都可以用一个表达式来表示主体,该表达式的值是Lambda的结果,在这些情况 ...

  2. 2019.01.19 bzoj3653: 谈笑风生（长链剖分优化dp）

    传送门 长链剖分优化dpdpdp水题. 题意简述:给一棵树,mmm次询问,每次给一个点aaa和一个值kkk,询问满足如下条件的三元组(a,b,c)(a,b,c)(a,b,c)的个数. a,b是c的祖先 ...

  3. Java日期时间使用总结[转载]

    Java日期时间使用总结   一.Java中的日期概述   日期在Java中是一块非常复杂的内容,对于一个日期在不同的语言国别环境中,日期的国际化,日期和时间之间的转换,日期的加减运算,日期的展示格式 ...

  4. Linux 下移植QT(1)---tslib 1.4.0移植

    步骤1:下载工具包 如下图 链接在此,点我. 步骤2:将tslib文件放入Linux虚拟机中, 步骤3:解压源码 tar -xvf tslib-1.4.tar cd tslib-1.4 步骤4:执行a ...

  5. springboot深入学习(一)-----springboot核心、配置文件加载、日志配置

    一.@SpringBootApplication @SpringBootApplication是spring boot的核心注解,源码如下: 相当于:@Configuration+@EnableAut ...

  6. 微信小程序请求数据

    微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...

  7. winSockets编程（三）最简单的C/S形式

    功能:向服务器端发送一个字符串,属于最简易的形式,一共需要4个主要步骤,初始化-建立套接字-连接服务器-发送数据 /****************************************** ...

  8. Android Studio自定义组合控件

    在Android的开发中,为了能够服用代码,会把有一定共有特点的控件组合在一起定义成一个自定义组合控件. 本文就详细讲述这一过程.虽然这样的View的组合有一个粒度的问题.粒度太大了无法复用,粒度太小 ...

  9. Latex中图表位置的控制

    \begin{figure}[!htbp] 其中htbp是可选的,它们分别代表 !-忽略“美学”标准 h-here t-top b-bottom p-page-of-its-own

  10. webService之helloword(java)rs

    webservice之rs(helloworld) 1.pom.xml文件 <dependencies> <!-- 使用CXF RS开发 --> <dependency& ...