脚本宝典收集整理的这篇文章主要介绍了利用http-server测试vue-cli打包后的项目,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目前在练习Vue,利用vue-cli脚手架开发了个vue2.0仿唯妮海购项目,在生产环境中一切良好,项目暂时告一段落,根据官方的
npm run build
打包后发现,在自己没有线上服务器的情况下,测试成为一大难题(实践发现,后面还有很多坑等着去填~~)。
安利一个项目中遇到的大难题另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
打包后的代码必须放在服务器下才能运行哦!直接双击index.html是不行的。
下面介绍两种搭建服务器的方式
开发项目,一般都会在本地搭建一个Apache服务器,各种Ahache服务器软件琳琅满目,自己挑选一个适合自己的即可,本人目前在使用xampp。搭建Apache服务器比较繁琐,各种配置比较复杂,这里不再赘述,有不懂得,请善用google or baidu。
http-server是一个基于node.js的简单的,零配置的命令行http服务器
既然是基于node的,首先必须安装node.js,这个略过不谈。
全局安装 http-server,这样就可以在任意一个本地项目中使用了。npm install http-server -g
http-server [path] [options]
如果指定path,即为指定的路径,如果不指定,即为当前所在文件路径。options下面再介绍。
强烈建议直接在vue-cli打包后的dist文件夹下打开命令行,如图所示,这样就不用再指定文件路径了
options选项说明
-p 端口号
指定一个新的端口。如果你想同时开启两个项目,则两个项目必须指定不同的端口号,否则有一个项目是打不开的。-o
,当服务器启动后,将自动打开浏览器。-P 域名地址
即可.这个P是大写的,上面端口那个p是小写的。注意区分哦!http-server -p 8890 -o -P http://www.weinihaigou.com
如果你的接口在本地服务器,那就没有跨域问题。如果你的接口在其它服务器,那就存在跨域问题。遇到跨域问题,最常见的控制台报错是No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8828' is therefore not allowed access.
,当然,也不排除其它报错情况。上面的http-server
可以帮你解决跨域问题,但前提是你命令行写正确,我把上面的跨域地址少写了个www
,结果就报上面的错误。
有时候打包运行时发现一片空白,这可能就是打包后的css/js的引入问题了。默认的引入方式如图
是绝对路径方式。我们希望是相对路径,可以把config/index.js
中的assetsPublicPath: '/',
改为assetsPublicPath: './',
这样再打包出来的就是相对路径了。
如果你的项目出现这个问题,那么你的router
中一定是把mode
定义为history
了。定义hash
模式则不会出这个问题。难道只能用很丑的hash
?当然不是,其实vue-router
官方文档的HTML5 History 模式对此已有说明,这个就需要后端的小伙伴帮我们设置一下了。
每个人的项目不同,配置不同,环境不同...可能还会遇到各种各样的问题,这里不可能一一列举,其实这些问题网上基本上都有解决方法,还是那句话,请善用 google or baidu。
因篇幅原因,请移步本文续篇vue-cli打包后的思索--代码优化
以上是脚本宝典为你收集整理的利用http-server测试vue-cli打包后的项目全部内容,希望文章能够帮你解决利用http-server测试vue-cli打包后的项目所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。