详解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 相关文章推荐
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python实现ping的方法
2015/07/06 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
人力资源部经理岗位职责规定
2014/02/23 职场文书
五年级学生评语
2014/04/22 职场文书
质量整改报告范文
2014/11/08 职场文书
护士实习自荐信
2015/03/06 职场文书
2016新年年会主持词
2015/07/06 职场文书