详解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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
JavaScript异步操作中串行和并行
Nov 20 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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php文件上传类完整实例
2016/05/14 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
js获取url传值的方法
2015/12/18 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python继承和抽象类的实现方法
2015/01/14 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python多进程写入同一文件的方法
2019/01/14 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python random模块的使用示例
2020/10/10 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
军训考核自我鉴定
2014/02/13 职场文书
商业街策划方案
2014/05/31 职场文书
项目负责人任命书
2014/06/04 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
电视新闻稿
2015/07/17 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书