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一般方法介绍 入门参考
Jun 21 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
sails框架的学习指南
Dec 22 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
在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之源码目录结构与功能说明
2016/06/01 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery easyui使用心得
2014/07/07 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python pandas模块基础学习详解
2019/07/03 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
python实现KNN近邻算法
2020/12/30 Python
艺术系应届生的自我评价
2013/10/19 职场文书
妇科医生自荐信
2013/11/05 职场文书
家电业务员岗位职责
2014/03/10 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
党员个人整改措施
2014/10/24 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
mysql查找连续出现n次以上的数字
2022/05/11 MySQL