默认情况下通过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. hdu-6058 Kanade's sum

    题意:略 思路:要我们求每个区间第K大数之和,其实可以转换为求多少个区间的第K大数是X,然后我们在求和就好了. 那么我们可以从小到大枚举所有可能成为第K大的数.为什么从小到大呢? 因为从小到大我们就略 ...

  2. ThinkPHP getBy动态查询

    getBy动态查询 ThinkPHP getBy动态查询是一个魔术方法,可以根据某个字段名称动态得到对应的一条数据记录. 根据用户名(username)查询对应的用户资料记录: public func ...

  3. 2018.12.21 bzoj3238: [Ahoi2013]差异(后缀自动机)

    传送门 后缀自动机好题. 题意: 做法:samsamsam 废话 考虑翻转字串,这样后缀的最长公共前缀等于前缀的最长公共后缀. 然后想到parentparentparent树上面两个串的最长公共后缀跟 ...

  4. 2018.11.02 NOIP训练 停车场(线段树)

    传送门 这是一道困饶了我一年的题. 其实就是去年去NOIP提高组试水的时候考的模拟题 但当时我水平不够,跟ykykyk一起杠了一个下午都没调出来. 今天终于AAA了. 其实就是一个维护最长连续0101 ...

  5. 集成 dubbo 微服务

    微服务架构近年来非常的火,阿里 的dubbo 是其中的一种解决方案. dubbo 的微服务主要分为以下几部分: 1.注册中心 2.服务提供者 3.消费者 4.监控平台 1.一般流程服务提供者向注册中心 ...

  6. linux将80端口映射到指定端口命令

    1.添加一个端口映射 将80端口映射到8088端口命令如下: iptables -t nat -I PREROUTING -p tcp --dport 80-j REDIRECT --to-port ...

  7. BT656与BT1120的区别

      从ITU-R BT1120文档上可知,BT1120支持的是1080p: 文档定义一帧为1 125 总行数和1 080 有效行:每行有效像素为1920图像频率60. 50. 30. 25 和 24H ...

  8. (转)MYSQL远程登录权限设置

    转自:http://blog.csdn.net/zhengnz/article/details/6308773 Mysql默认关闭远程登录权限,如下操作允许用户在任意地点登录: 1. 进入mysql, ...

  9. java通过poi编写excel文件

    public String writeExcel(List<MedicalWhiteList> MedicalWhiteList) { if(MedicalWhiteList == nul ...

  10. hdu 5059 简单字符串处理

    http://acm.hdu.edu.cn/showproblem.php?pid=5059 确定输入的数是否在(a,b)内 简单字符串处理 #include <cstdio> #incl ...