默认情况下通过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. 计算器的改良(NOIP2000)

    题目链接:计算器的改良 这道题,不是很难,但代码也短不到哪去. 我们这里决定采取边读入边计算的方法,因为题目没有明确说式子有多长. 我们需要计算什么? 我们需要知道等号两边未知数的系数和常数项即可. ...

  2. 如何安全管理windows系统日志，windows系统日志的报表和告警

    如何安全管理windows系统日志,windows系统日志的报表和告警 无论大小,每个拥有IT基础设施的组织都容易发生内部安全攻击.您的损失等同于黑客的收益:访问机密数据.滥用检索到的信息.系统崩溃, ...

  3. 2018.11.07 bzoj2751: [HAOI2012]容易题(easy)（组合数学）

    传送门 组合数学一眼题. 感觉一直做这种题智商会降低. 利用组合数学的分步计数原理. 只用关心每个数不被限制的取值的总和然后乘起来就可以了. 对于大部分数都不会被限制,总和都是n(n+1)2\frac ...

  4. vue的子传父

    子组件传值给父组件,需要触发一个事件. 在这个事件里,使用this.$emit("父组件使用的名称","子组件的数据") 在父组件中引用的子组件,在子组件的标签 ...

  5. CString成员函数详解[转]

    1.构造函数(常用) CString( const unsigned char* psz );      例:char s[]="abcdef";              cha ...

  6. related work

    Traditional approaches, e.g., genetic algorithm (GA) [2] and ant colony optimization (ACO) [3], can ...

  7. IntelliJ IDEA 2017版 spring-boot 2.03 去除控制台logo;去除springboot 图标;去除springboot 图

    1.控制台出现logo图标 2.如果不喜欢,如何去除这个logo 在其Application中进行设置 package com.springboot.logo; import org.springfr ...

  8. php检测服务器是否可用 不可用发动钉钉消息

    <?php set_time_limit(0); //ping一个IP地址,能不能通 function ping($ip) { $ip_port = explode(':', $ip); // ...

  9. ACtiveMQ中间件-消息的接收和发送

    一.发送消息基本步骤 (1)启动ActiveMQ的的activemq.bat批处理文件或BrokerService节点 (2)创建连接使用的工厂类ActiveMQConnectionFactory通过 ...

  10. Oracle 数据库 dbConsole 配置笔记

    Oracle安装后,DBConsole有时安装会失败,这时可以通过以下命令恢复: set oracle_sid=orclemca -repos recreateemca -config dbcontr ...