详解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 相关文章推荐
js的Boolean对象初始值示例
Mar 04 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Angular简单验证功能示例
Dec 22 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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/06/06 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
python实现隐马尔科夫模型HMM
2018/03/25 Python
python reverse反转部分数组的实例
2018/12/13 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python实现人脸签到系统
2020/04/13 Python
python安装后的目录在哪里
2020/06/21 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
期末总结的个人自我评价
2013/11/02 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
历史博物馆观后感
2015/06/05 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python