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 相关文章推荐
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
javascript基础知识讲解
Jan 11 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
JS判断数组那点事
Oct 10 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
JS实现网站吸顶条
Jan 08 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
JavaScript日历实现代码
2010/09/12 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
清除输入框内的空格
2016/12/21 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python内置函数OCT详解
2016/11/09 Python
python实现反转部分单向链表
2018/09/27 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
外贸业务员求职信范文
2013/12/12 职场文书
心得体会怎么写
2013/12/30 职场文书
房地产广告词大全
2014/03/19 职场文书
交通安全寄语大全
2014/04/08 职场文书
南京青奥会口号
2014/06/12 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年党员承诺书
2015/01/21 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
超强台风观后感
2015/06/09 职场文书
升学宴来宾致辞
2015/07/27 职场文书