vue打包相关细节整理(小结)
项目在dev环境下运行没有问题，打包之后就各种报错一下来整理一下遇到的问题
1、打包好的网页无法访问static目录的资源
原因是下载官方的cli时，默认设置是根据绝对路径来定位资源目录的，这样就非常方便在dev环境下进行本地调试，但是在打包部署之后，就需要通过相对路径来访问静态资源了，修改方法很简单，在config/index.js文件文件中，定位到
把assetsPublicPath的value改成‘./'，修改之后，打包生成的文件，对资源的引用路径会在路径前面加上‘./'，这样就可以找到对应的资源文件了
2、可以找到静态资源文件，但是在css文件中的引用的资源并没有找到
原因是打包的时候，所有static文件下的资源都是加工，生成文件名加上hashcode为新命名的文件，例如css文件中引用了ttf（字体文件）,由于ttf文件在打包之后加工成xxx+hashcode.ttf文件，原本的css文件的引用当然会找不到加工后的ttf文件。
解决的方法就是通过修改build/util.js文件的
，添加publicPath：‘../../'
我们会发现打包后的css文件，对ttf文件的引用路径自动加上了hashcode，完美解决css引用外部资源失效的问题
3、图片，MP4，字体等资源比较大，超过限制，导致文件没有被打包进去，可以通过\build\webpack.base.conf.js
，
修改对文件的大小限制
4、打包后，css样式和测试环境的不一样，原因是打包之后的css文件调用顺序发生错乱了，
所有第三方库的css文件在引入的时候，务必在App文件引入之前引入，以上只是main.js文件的改法，可以根据需要来修改对应的js文件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
- vue打包后显示空白正确处理方法
- Vue打包后出现一些map文件的解决方法
- 使用vue打包时vendor文件过大或者是app.js文件很大的问题
- vue打包使用Nginx代理解决跨域问题
- 解决vue打包项目后刷新404的问题
- 解决vue打包之后静态资源图片失效的问题
- 解决Vue打包之后文件路径出错的问题
- vue打包之后生成一个配置文件修改接口的方法
- 解决vue打包css文件中背景图片的路径问题
- 解决vue打包后vendor.js文件过大问题
- 解决vue打包后刷新页面报错：Unexpected token <
- 解决Vue打包后访问图片/图标不显示的问题
- vue打包的时候自动将px转成rem的操作方法
- 详解Vue打包优化之code spliting
- 基于vue打包后字体和图片资源失效问题的解决方法
- Vue打包后访问静态资源路径问题
- 解决Vue打包上线之后部分CSS不生效的问题
- 压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
相关文章
这篇文章主要介绍了如何运行vue项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Element input树型下拉框的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue中axios的封装问题(简易版拦截,get,post)
这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post),需要的朋友可以参考下2018-06-06
在本文章里小编给大家整理了关于Vue中this.$nextTick的作用及用法，有需要的朋友们可以跟着学习参考下。2020-02-02
这篇文章主要为大家详细介绍了vue.js的安装方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最近在项目中遇到点击按钮复制链接功能,所以这篇文章主要给大家介绍了关于vue粘贴复制功能的实现过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue2配置scss的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
关于vue-admin-template模板连接后端改造登录功能
这篇文章主要介绍了关于vue-admin-template模板连接后端改造登录功能,登陆方法根据账号密码查出用户信息，根据用户id与name生成token并返回，userinfo则是对token进行获取，在查出对应值进行返回，感兴趣的朋友一起看看吧2022-05-05
MPEGTS.js是一个轻量级的JavaScript库,用于处理MPEG-TS流,这篇文章主要给大家介绍了关于vue使用mpegts.js的详细步骤记录,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
Vue项目localhost:8080无法访问此网站，拒绝了我们的连接请求的解决方案
前端页面使用的是vue,vue项目启动成功,没有任何报错,服务控制台已出现APP访问地址,点击访问地址出现无法访问此网站,拒绝了我们的连接请求,所以本文给大家介绍了Vue项目localhost:8080无法访问此网站,拒绝了我们的连接请求的解决方案,需要的朋友可以参考下2024-12-12
最新评论