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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
Vue和Flask通信的实现
May 19 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
一个程序下载的管理程序(四)
2006/10/09 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python实现AES加密解密
2019/03/28 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python 进程池pool使用详解
2020/10/15 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
工作作风建设心得体会
2014/10/22 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
抢劫罪辩护词
2015/05/21 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python