博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue打包相关细节整理
阅读量:5878 次
发布时间:2019-06-19

本文共 777 字,大约阅读时间需要 2 分钟。

hot3.png

项目在dev环境下运行没有问题,打包之后就各种报错一下来整理一下遇到的问题

1、打包好的网页无法访问static目录的资源

原因是下载官方的cli时,默认设置是根据绝对路径来定位资源目录的,这样就非常方便在dev环境下进行本地调试,但是在打包部署之后,就需要通过相对路径来访问静态资源了,修改方法很简单,在config/index.js文件文件中,定位到

764cd53a29b133828d913c4a80a0364c6b8.jpg

把assetsPublicPath的value改成‘./’,修改之后,打包生成的文件,对资源的引用路径会在路径前面加上‘./’,这样就可以找到对应的资源文件了

2、可以找到静态资源文件,但是在css文件中的引用的资源并没有找到

原因是打包的时候,所有static文件下的资源都是加工,生成文件名加上hashcode为新命名的文件,例如css文件中引用了ttf(字体文件),由于ttf文件在打包之后加工成xxx+hashcode.ttf文件,原本的css文件的引用当然会找不到加工后的ttf文件。

解决的方法就是通过修改build/util.js文件的

a25896138a9a3f08485095e44235cf8ecb6.jpg,添加publicPath:‘../../’

我们会发现打包后的css文件,对ttf文件的引用路径自动加上了hashcode,完美解决css引用外部资源失效的问题

3、图片,MP4,字体等资源比较大,超过限制,导致文件没有被打包进去,可以通过\build\webpack.base.conf.js

6ceb43cd1ffc94eb024a730b2b3aea034d0.jpg,修改对文件的大小限制

 

4、打包后,css样式和测试环境的不一样,原因是打包之后的css文件调用顺序发生错乱了,

5601d60c1e8cf9cecae03b7bac182dc2ea1.jpg

所有第三方库的css文件在引入的时候,务必在App文件引入之前引入,以上只是main.js文件的改法,可以根据需要来修改对应的js文件

转载于:https://my.oschina.net/carbenson/blog/1936605

你可能感兴趣的文章
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
国内先进的智能移动广告聚合平台-KeyMob聚合
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
PHP - 如何打印函数调用树
查看>>
js闭包
查看>>
寒假。3.3.G - Common Child (最大公共子序)
查看>>
设计模式学习笔记--原型模式
查看>>
.Net 通过MySQLDriverCS操作MySQL
查看>>
JS Cookie
查看>>
ubuntu Unable to locate package sysv-rc-conf
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
【吉光片羽】短信验证
查看>>
MacBook如何用Parallels Desktop安装windows7/8
查看>>
gitlab 完整部署实例
查看>>
GNS关于IPS&ASA&PIX&Junos的配置
查看>>
七天学会ASP.NET MVC (四)——用户授权认证问题
查看>>
upgrade to iOS7,how to remove stroyboard?
查看>>
影响企业信息化成败的几点因素
查看>>