详解vue项目打包步骤


Posted in Javascript onMarch 29, 2019

终端运行命令 npm run build

打包成功的标志与项目的改变,如下图:

详解vue项目打包步骤

详解vue项目打包步骤

 点击index.html,通过浏览器运行,出现以下报错,如图:

详解vue项目打包步骤

那么应该如何修改呢?

具体步骤如下:

  1. 1、查看package.js文件的scripts命令
  2. 2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
  3. 3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
  4. 4、终端运行 npm run build 即可。

此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。

以上所述是小编给大家介绍的vue项目打包步骤详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
Vue项目history模式下微信分享爬坑总结
Mar 29 #Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 #Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 #Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 #Javascript
详解vue配置后台接口方式
Mar 29 #Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
js比较日期大小的方法
2015/05/12 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python入门教程之if语句的用法
2015/05/14 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python标准库OS模块详解
2020/03/10 Python
python两个list[]相加的实现方法
2020/09/23 Python
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
个人近期表现材料
2014/02/11 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
校园元旦活动总结
2014/07/09 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2019各种承诺书范文
2019/06/24 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android