详解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效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
vue实现动态按钮功能
May 13 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
js Proxy的原理详解
May 25 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
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python之列表推导式的用法
2019/11/29 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Python如何读写CSV文件
2020/08/13 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
自荐信如何制作?
2014/02/21 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
环保建议书200字
2014/05/14 职场文书
入党政审材料范文
2014/12/24 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python