浅谈在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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
Jquery cookie操作代码
Mar 14 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
js+css实现导航效果实例
Feb 10 Javascript
javascript模拟命名空间
Apr 17 Javascript
微信小程序 标签传入数据
May 08 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
JS实现网页烟花动画效果
Mar 10 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中慎用双等于(==)的详解
2013/06/06 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
微信支付的开发流程详解
2016/09/13 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
查看python下OpenCV版本的方法
2018/08/03 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python全栈知识点总结
2019/07/01 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python适合做数据挖掘吗
2020/06/16 Python
Python实现GIF图倒放
2020/07/16 Python
Python修改DBF文件指定列
2020/12/19 Python
python绘制高斯曲线
2021/02/19 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
应届大专生求职信
2014/06/26 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2016春节慰问信范文
2015/03/25 职场文书
小学英语教学随笔
2015/08/14 职场文书
电台广播稿范文
2015/08/19 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python