默认情况下通过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. CSS-表格特有属性和定位

    1.表格特有属性 1.边框合并 属性:border-collapse 取值: 1.separate 默认值,即分离边框模式 2.collapse 边框合并 2.边框边距 作用:设置单元格之间或单元格与 ...

  2. Java的GUI如何能够切换界面

    在设计GUI的时候,会遇到类似于菜单栏的切换,如何做到界面切换 使用一个JTabbedPane组件,就可以实现界面的切换问题. 在使用的时候可以将里面要使用的组件进行一个封装,封装成一个Panel.再 ...

  3. mysql之索引查询1

    一 备份数据 备份库: mysqldump:拷贝数据 --database:数据库 基本语法是:mysqldump -h服务器名 -u用户名 -p密码 --database 库名 > 备份路径. ...

  4. SQL语句or查询,union all查询,分页查询,分组,AND查询

    一.OR查询 1.在AND多个筛选条件和一个or条件时,如果没有括号包裹,or会就近原则包裹之后的所有and条件,也就是同级的多个and条件只能对,or条件的一边起作用 2.如果or条件两边的筛选条件 ...

  5. ES6通过使用babel兼容到ie9

    1.打开这个地址: https://unpkg.com/babel-standalone@6/babel.min.js 新建babel.min.js,把代码复制进去,然后在jq项目里引用. 2.在下面 ...

  6. Le Chapitre V

    Chaque jour j'apprennais quelque chose sur la planète, sur le départ, sur le voyage. Ca venait tout ...

  7. Keepalived+Nginx高可用架构配置

    1.yum install -y libnfnetlink-devel2.yum -y install libnl libnl-devel 3.yum -y install openssl-devel ...

  8. understand试用笔记一阅读VS2010项目

    一.查看vs2010项目 打开understand,File—New—Project...—Next—Next [向导第三步,选“Import Visual Sudio project files”] ...

  9. CentOS7 安装可视化脚本安装包Webmin

    一.简介 Webmin是一个基于Web的Linux系统管理界面.你就可以通过图形化的方式设置用户账号.Apache.DNS.文件共享等服务. 二.安装 1.下载安装包到本地Windows系统 http ...

  10. IntelliJ IDEA 2017版 编译器使用学习笔记(八) (图文详尽版);IDE快捷键使用;IDE代码重构(寻找修改痕迹)

    git集成: 快速找到版本控制器中某段代码的作者 一.annotate            选中某行代码,右键,选择annotate,鼠标放于其上就会显示注释    二.移动所有改动之处: prev ...