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 全选效果实现代码
Mar 23 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
在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
source.php查看源文件
2006/12/09 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
js查找父节点的简单方法
2008/06/28 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
五种Python转义表示法
2020/11/27 Python
会计学生自我鉴定
2014/02/06 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
党员个人承诺书
2015/04/27 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python