浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法


Posted in Javascript onFebruary 21, 2018

1.vue中的vue-cli打包

最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不多说,进入正题。

a.执行打包命令:npm run build

b.打包之后生成的文件夹为根目录下的dist文件:

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法 

c.进入dist中

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法 

在运行这个index.html之前先说说一些打包配置问题:

在config文件夹下可以看到一个index.js文件,打开其中可以看到有几个属性分别是:

assetsRoot: path.resolve(__dirname, '../dist')//其实这个就是刚才打包后的根目录文件夹dist,所有的文件都会输出到这里

assetsSubDirectory: 'static' //默认是把css,fonts,images,js输出到这个文件夹下,但是我的改成了 assetsSubDirectory: '' 所以上图就直接输出到dist下了,即这个参数配置的是静态文件的输出目录

assetsPublicPath: '/' 这个就是静态文件的引用前缀

在index.html文件中可以看到每个js,css文件的引用路径,在服务器上运行时如果发生找不到文件如下图

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

大多数情况下都是参数配置问题,可以根据index.html文件下的路径进行测试进行解决,如果不行可以留言一起交流。

Javascript 相关文章推荐
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
vue+elementUI实现简单日历功能
Sep 24 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
Angular实现的进度条功能示例
Feb 18 #Javascript
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python实现单向链表详解
2018/02/08 Python
详解python持久化文件读写
2019/04/06 Python
Python实现图片添加文字
2019/11/26 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python输出数学符号实例
2020/05/11 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
大学生安全责任书
2014/07/25 职场文书
学习普通话的体会
2014/11/07 职场文书
党员证明信
2015/06/19 职场文书
运动会宣传稿100字
2015/07/23 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
学习nginx基础知识
2021/09/04 Servers
MyBatis 动态SQL全面详解
2021/10/05 MySQL