用webpack打包vue项目后，静态资源路径失效问题

于 2017-09-21 10:21:14 发布 6768 收藏
分类专栏： vue 文章标签： vue webpack vue-cil
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a120120yyyy/article/details/78048838
版权
当时正在做一个vue的移动端项目，用npm run build打包后，发现有些在dev环境下可用的静态资源失效，经过调试后，发现在vue-cil生成的项目结构中，找到build目录，在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
a120120yyyy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏 更改收藏夹
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue webpack打包后图片路径错误的完美解决方法
10-17
主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Microsoft Excel 2019 VBA and Macros
01-17
Microsoft Excel 2019 VBA and Macros (Business Skills) By 作者: Bill Jelen – Tracy Syrstad ISBN-10 书号: 1509306110 ISBN-13 书号: 9781509306114 Edition 版本: 1 出版日期: 2019-01-07 pages 页数: (1580) Use this guide to automate virtually any routine Excel task: save yourself hours, days, maybe even weeks. Make Excel do things you thought were impossible, discover macro techniques you won’t find anywhere else, and create automated reports that are amazingly powerful. Bill Jelen and Tracy Syrstad help you instantly visualize information to make it actionable; capture data from anywhere, and use it anywhere; and automate the best new features in Excel 2019 and Excel in Office 365. You’ll find simple, step-by-step instructions, real-world case studies, and 50 workbooks packed with examples and complete, easy-to-adapt solutions. By reading this book, you will: Quickly master Excel macro development Work more efficiently with ranges, cells, and formulas Generate automated reports and quickly adapt them for new requirements Learn to automate pivot tables to summarize, analyze, explore, and present data Use custom dialog boxes to collect data from others using Excel Improve the reliability and resiliency of your macros Integrate data from the internet, Access databases, and other sources Automatically generate charts, visualizations, sparklines, and Word documents Create powerful solutions with classes, collections, and custom functions Solve sophisticated business analysis problems more rapidly About This Book For everyone who wants to get more done with Microsoft Excel in less time For business and financial professionals, entrepreneurs, students, and others who need to efficiently manage and analyze data
vue笔记
最新发布
weixin_53574739的博客
02-23 50
Vue.directive自定义指令可以定义在全局API里，全局API并不在Vue实例的构造器里，比如注册一个全局指令v-focus，该指令的功能是在页面加载时，元素获得焦点。
webpack下实现动态引入文件方法
11-27
刚开始使用webpack时，可能很多人都会有过这样的想法，在require文件时，能不能不写静态的字符串路径，而是使用一个更灵活的方式，比如定义一个变量，根据具体的运行情况来确定需要require哪个文件！ 比如，笔者就遇到了一个这样的需求。 当时是使用vue-router开发一个管理系统，管理系统自身有一个目录数组，而vue-router也需要一个route配置数组，而这两者恰恰是对应关系的。当时就想，能不能只维护一个目录数组，然后动态的生成route数组呢？ 于是我实现了一个小demo，如下： // directory let dir = [ { name: 'a', path:
excel单元格一个条件匹配多个结果VBA
风子~的博客
04-02 1万+
应用背景 如图，一批如表1的数据，一个单元格对应多个值，需要去重单元格并合并其值在同一个单元格中展示，因此用VBA写个Function实现手敲的烦恼。 VBA实现程序： Function abc(a As Range, b As Range, c As String) Dim t As String '如果a与b的区域大小不同，就显示“错误” If a.Rows.Count <> b...
Excel中的公式与函数
qq_44866428的博客
09-26 303
Excel中的公式与函数 1.地址引用 我们建立一个函数时，引用的是单元格的地址，因此单元格内的数值变化，公式计算的结果也会随之变化。介绍地址引用前，介绍两个小知识点： Ctrl + ~ 这个快捷键能让单元格显示公式。 F4在有公式的单元格中按三次，会出现三种不同的$，这个符号叫“绝对引用符”。 地址引用分为三种： ①相对地址引用。最简单，属于多数人都会的那种，十字架拖动即可实现； ②绝对地址引用。引用E2的值，不发生变化，在单元格中加上“小别针”=>$E$2。下图中求“百分比”那一列，用到的分母
关于vue中配置根路径@的问题
04-26 381
创建一个vue.config.js文件 然后复制进去 const path = require("path"); const resolve = dir => path.join(__dirname, dir); module.exports = { publicPath: "./", runtimeCompiler: true, chainWebpack: config => { config.resolve.alias.set("@", resolve("..
vue在css中使用@路径报错问题
zhufan2333的博客
10-12 1022
vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。， 加~前缀才会解释成模块路径（~@代表根路径）。
vue，el-image 图片引入根路径@无效
北海_南风
07-18 749
用于引入模块、JSON、或本地文件。可以从node_modules引入模块。require是运行时调用，所以require理论上可以运用在代码的任何地方。图片在根路径下，如下引用图片路径发现无效，图片显示“加载失败”这样就能正常引入图片了。...
vue 加载图片使用@路径加载不出来
坐等夕阳落time的博客
10-14 742
vue 加载图片使用@路径加载不出来
vue中@路径不好用
weixin_45716754的博客
11-21 228
安装 npm install path --save。在vue.config.js加上。
Excel VLOOKUP函数怎么查询一个值返回多个结果
weixin_34059951的博客
03-22 4381
VLOOKUP函数只能返回一个结果，如果想要一对多查询，可以使用其他函数，看下边例子，将部门为A的姓名列举到E列： 　　一、一个单元格放一个名字：E2公式=IFERROR(INDEX(B:B,SMALL(IF(A:A=D$2,ROW(A:A)),ROW(A1))),"")，数组公式，三键结束； 　　二、将A部门的姓名放在E2单元格中，用逗号隔开：首先将数据按部门排序，然后在E2公式=M...
如何使用excel的vb如何把一个单元格的内容分开到另两个单元格_10个Excel技巧，每天都要使用。建议收藏。...
weixin_39969143的博客
11-30 334
最近被Excel完虐了。临下班时，同事交给我一个数据统计的表格，需要马上交，急急急！！哥，我本来想早点下班，溜溜狗呢？？里面的数据上千项，要统计出去年、今年每阶段的类型、采购金额及增减幅度。涉及不同月份的阶段价，叫我帮忙的同事之前也没搞过。关键表格的日期格式还不是统一的，有些是乱码的，一个个点筛选，一个表，做了两个小时，到最后，结果还是显而易见的错，一个普通类别的采购总价100多w？？对接人问我，...
webpack引用动态资源路径错误的解决方案
王海旭的博客
03-13 2729
问题：打包的项目为根目录引用时(ip:端口/index）,如果资源通过js动态加载。会导致路径引用错误需求：项目需要挂载在主站的次级目录（如：*/marketing/）解决方法把项目打包为相对路径； 通过配置vue-router，打包部署包时加上路由前缀（如：/marketing/路由A）; fis.hook('relative'); fis.match("**
Webpack 中 css import 使用 alias 相对路径
weixin_30682127的博客
02-02 107
文章链接：https://wiki.zthxxx.me/wiki/%E6%8A%80%E6%9C%AF%E5%BC%80%E5%8F%91/%E5%89%8D%E7%AB%AF/Webpack-%E4%B8%AD-css-import-%E4%BD%BF%E7%94%A8-alias-%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84/ 但是需要补充一点的是：引用...
利用VB操作Excel
liushengyulsy的博客
02-13 7808
用VB操作Excel详解 一、 VB读写EXCEL表： VB本身提自动化功能可以读写EXCEL表，其方法如下： 1、在工程中引用MicrosoftExcel 类型库： 从"工程"菜单中选择"引用"栏；选择Microsoft Excel 9.0 Object Library（EXCEL2000），然后选择"确 定"。表示在工程中要引用 EXCEL类型库。 2、在通用对象的声明过程中定义...
解决vue打包后部署到服务器找不到静态资源问题
ct5211314的博客
12-28 6228
我们将项目打包后放到服务器上，会报找不到静态资源的错误。 一、错误原因 将项目打包后放在服务器上会默认在根目录上去找静态资源，但我们并没有将资源放在根目录上 二、解决方案新增vue.config.js文件 与后台沟通好服务器资源所放位置 module.exports = { publicPath: process.env.NODE_ENV === "development" ? "" : "/h5/pharmacy", }; ...
vue填坑之webpack run build 静态资源找不到
热门推荐
qq_30346089的博客
09-12 2万+
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常,run build后放到线上找不到静态资源文件路径，最后终于解决
vue项目之webpack打包静态资源路径不准确
Cassie's blog
10-19 1万+
文章有点长，希望能够阅读下去，有所帮助。 问题 将打包好的项目部署到服务器，发现报错说图片找不到。 静态资源如js访问不到 分析并且解决问题 明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。  静态资源找不到如js文件 资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。 解决： 找到confi...
vue打包静态资源后显示空白及static文件路径报错填坑
谭少.居然的博客
09-05 2万+
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a120120yyyy

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值