Vue2.0学习系列之项目上线的方法步骤(图文)


Posted in Javascript onSeptember 25, 2018

当你好不容易的做好了一个Vue项目,准备去上线的时候却发现不知道该怎么办时,或者遇到了一些问题,那么来看我这篇文章吧,你会有所收获的。

1:打包

项目上线必须要打包。

命令: npm run build

打包后会生成 一个 dist 文件夹,里边有 index.html文件 和 static文件夹

打包命令截图如下:

Vue2.0学习系列之项目上线的方法步骤(图文)

生成文件如下:

Vue2.0学习系列之项目上线的方法步骤(图文)

现在我们已经打包好了,那么现在让我们打开这个项目吧。

双击 index.html 打开

Vue2.0学习系列之项目上线的方法步骤(图文)

你会看到 一堆的报错,慌不?别着急接着看。通过上图我们可以看到报错的原因是资源路径不对,这时我们需要去修改一些文件了。

Vue2.0学习系列之项目上线的方法步骤(图文)

在这里 把资源的路径 由 '/' 改为 './',因为 './' 是当前目录下的意思,

没用之前 index.html 里的引入文件是这样的:

Vue2.0学习系列之项目上线的方法步骤(图文)

这个路径它是找不到的,所以报错了。

改完后 是这样的:

Vue2.0学习系列之项目上线的方法步骤(图文)

此时 路径就对了,再双击打开就可以了

Vue2.0学习系列之项目上线的方法步骤(图文)

这时就没有报错了,正常打开。

2:启动项目。(运行 index.html)

你可以双击 打开,也可以用 node 的 anywhere 启动一个静态文件服务器。在 npm 官网搜索就可以找到了,然后安装。

Vue2.0学习系列之项目上线的方法步骤(图文)

cd 到我们的 dist 文件夹中,然后 anwhere 就可以启动了。

Vue2.0学习系列之项目上线的方法步骤(图文)

然后我们的打包工作就做完了,可以把我们的整个 dist 文件 给到后端,或者运维让他们上线。

3:解决一些错误

第一个: 静态资源路径不对的问题

当我在 vue 的 css 里写了一个背景图片,但是 npm run build 后就不太好使了。

截图如下:可以看到,在 npm run dev 时 是好的

Vue2.0学习系列之项目上线的方法步骤(图文)

Vue2.0学习系列之项目上线的方法步骤(图文)

Vue2.0学习系列之项目上线的方法步骤(图文)

但是 当我 打包 并且使用 anywhere 启动后

Vue2.0学习系列之项目上线的方法步骤(图文)

却报错了,它告诉我 资源的路径不对,仔细一看我没这个路径呀,我项目也没随便改配置呀,是不是又要拍脑门了,别急,跟我一起来改个配置。

打开 我们的 build 文件夹,找到里边的 utils.js 文件,找到第 51 行(目测是的),添加 这个 代码 publicPath: '../../' ,然后重新打包 就可以了,这时资源路径就对了。

更改如下:

Vue2.0学习系列之项目上线的方法步骤(图文)

效果如下:

Vue2.0学习系列之项目上线的方法步骤(图文)

我们用审查元素来看一下: 这次它 就正确的找到了 资源的路径,加载出来了资源。

Vue2.0学习系列之项目上线的方法步骤(图文)

错误写法:

Vue2.0学习系列之项目上线的方法步骤(图文)

现在知道怎么去解决这个问题了的吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
MooTools 1.2介绍
Sep 14 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
浅析javascript的return语句
Dec 15 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
在vue中多次调用同一个定义全局变量的实例
Sep 25 #Javascript
vue观察模式浅析
Sep 25 #Javascript
详解搭建es6+devServer简单开发环境
Sep 25 #Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 #Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 #Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 #Javascript
vue移动端弹框组件的实例
Sep 25 #Javascript
You might like
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Django自定义分页与bootstrap分页结合
2021/02/22 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Django中提示消息messages的设置方式
2019/11/15 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
大学四年规划书范文
2013/12/27 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
2014年医院工作总结
2014/11/20 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
python开发制作好看的时钟效果
2022/05/02 Python