Vue-cli配置打包文件本地使用的教程图解


Posted in Javascript onAugust 02, 2018

最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图:

 
Vue-cli配置打包文件本地使用的教程图解
Vue-cli配置打包文件本地使用的教程图解 

url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题

于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用的有fileName、path属性,指定输出文件的名称和在项目中的位置,publicPath可以为项目中的所有资源指定一个基础路径,也是我们解决这个问题的关键

官方文档:webpack output

如图:

Vue-cli配置打包文件本地使用的教程图解 

可以看到publicPath属性中有个三元运算,process.env.NODE_ENV又是个什么呢?

precess对象是一个全局变量,可以在应用程序中全局使用的(包括业务页面),
process.env属性返回一个包含用户环境信息的对象,
process.env.NODE_ENV就是用来定义环境变量,一般包括production(生产环境)、development(开发环境),我们在webpack中的各种配置也是根据环境变量来做相应处理。

既然是对生产环境的文件做处理自然是去找config.build对象,这个时候就来到config文件夹下找相关配置了

Vue-cli配置打包文件本地使用的教程图解
Vue-cli配置打包文件本地使用的教程图解 

index.js文件中输出两个对象(dev、 build), 在build对象中更改assetsPublicPath为'./'或者空字符串都行,这时候执行下打包命令 npm run build,在浏览器中打开dist文件夹下的index.html

Vue-cli配置打包文件本地使用的教程图解 

哈哈,文件加载过来了,但是,css文件中引的font文件路径加载不到,来看看这个时候font文件的路径

Vue-cli配置打包文件本地使用的教程图解 

由于我用了相对当前文件夹的路径,此时的url就是相对当前css文件所在目录的,此时dist文件夹结构如图:

Vue-cli配置打包文件本地使用的教程图解

我想到的解决办法是对font文件的输出做单独处理,还是webpack.base.config.js文件,

Vue-cli配置打包文件本地使用的教程图解 

更改font文件的输出路径,好了,npm run build

Vue-cli配置打包文件本地使用的教程图解 

铛啷啷,加载出来了。

总结

以上所述是小编给大家介绍的Vue-cli配置打包文件本地使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
js数组常用最重要的方法
Feb 04 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 #Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 #Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 #Javascript
解决vue router组件状态刷新消失的问题
Aug 01 #Javascript
Promise.all中对于reject的处理方法
Aug 01 #Javascript
详解es6超好用的语法糖Decorator
Aug 01 #Javascript
Vue Router去掉url中默认的锚点#
Aug 01 #Javascript
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
简单的js分页脚本
2009/05/21 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python线程中的同步问题及解决方法
2019/08/29 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python实现登录与注册系统
2020/11/30 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
介绍一下sql server的安全性
2014/08/10 面试题
自主招生自荐信
2013/12/08 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
学雷锋演讲稿
2014/03/04 职场文书
高中生的自我评价
2014/03/04 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
劳动竞赛口号
2014/06/16 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
六一儿童节开幕词
2015/01/29 职场文书
食品质检员岗位职责
2015/04/08 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang