详解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获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
微信小程序 video组件详解
Oct 25 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
JavaScript实例 ODO List分析
Jan 22 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python pygame模块编写飞机大战
2018/11/20 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
大学生入党思想汇报
2014/01/01 职场文书
小学毕业感言500字
2014/02/28 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
蓝颜请假条
2014/04/11 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python