利用httpserver测试vuecli打包后的项目

目前在练习Vue&＃xff0c;利用vue-cli脚手架开发了个vue2.0仿唯妮海购项目&＃xff0c;在生产环境中一切良好&＃xff0c;项目暂时告一段落&＃xff0c;根据官方的npm run build打包后发现&＃xff0c;在自己没有线上服务器的情况下&＃xff0c;测试成为一大难题&＃xff08;实践发现&＃xff0c;后面还有很多坑等着去填~~&＃xff09;。

项目展示

安利一个项目中遇到的大难题另辟蹊径&＃xff1a;vue单页面&＃xff0c;多路由&＃xff0c;前进刷新&＃xff0c;后退不刷新

分类页详情页

打包测试&＃xff08;搭建服务器&＃xff09;

打包后的代码必须放在服务器下才能运行哦&＃xff01;直接双击index.html是不行的。
下面介绍两种搭建服务器的方式

本地搭建Apache服务器

开发项目&＃xff0c;一般都会在本地搭建一个Apache服务器&＃xff0c;各种Ahache服务器软件琳琅满目&＃xff0c;自己挑选一个适合自己的即可&＃xff0c;本人目前在使用xampp。搭建Apache服务器比较繁琐&＃xff0c;各种配置比较复杂&＃xff0c;这里不再赘述&＃xff0c;有不懂得&＃xff0c;请善用google or baidu。

利用node.js的 http-server搭建一个http服务器

http-server是一个基于node.js的简单的&＃xff0c;零配置的命令行http服务器

安装

既然是基于node的&＃xff0c;首先必须安装node.js&＃xff0c;这个略过不谈。
全局安装 http-server&＃xff0c;这样就可以在任意一个本地项目中使用了。
npm install http-server -g

使用

http-server [path] [options]
　
如果指定path,即为指定的路径&＃xff0c;如果不指定&＃xff0c;即为当前所在文件路径。options下面再介绍。
强烈建议直接在vue-cli打包后的dist文件夹下打开命令行&＃xff0c;如图所示&＃xff0c;这样就不用再指定文件路径了

options选项说明
- http-server默认启用8080端口&＃xff0c;但是这个端口容易和电脑中的某些任务冲突&＃xff0c;强烈建议 利用-p 端口号指定一个新的端口。如果你想同时开启两个项目&＃xff0c;则两个项目必须指定不同的端口号&＃xff0c;否则有一个项目是打不开的。
- 每次都手动打开浏览器&＃xff1f;太麻烦了&＃xff0c;添加配置项-o&＃xff0c;当服务器启动后&＃xff0c;将自动打开浏览器。
- what ? 你的项目的请求接口是跨域的&＃xff1f;不能直接访问&＃xff1f; 当然&＃xff0c;我这个项目也是跨域获取的唯妮海购的接口&＃xff0c;如何解决跨域这个问题呢&＃xff1f;添加-P 域名地址即可.这个P是大写的&＃xff0c;上面端口那个p是小写的。注意区分哦&＃xff01;
- 综上&＃xff0c;我的启动服务器的命令即http-server -p 8890 -o -P http://www.weinihaigou.com
  
  按照正常情况来说&＃xff0c;这时会自动打开浏览器&＃xff0c;渲染出你的项目,可是&＃xff0c;我在打包测试时&＃xff0c;还发现了一些其他问题

启动服务后可能会遇到的问题

跨域问题

如果你的接口在本地服务器&＃xff0c;那就没有跨域问题。如果你的接口在其它服务器&＃xff0c;那就存在跨域问题。遇到跨域问题&＃xff0c;最常见的控制台报错是No &＃39;Access-Control-Allow-Origin&＃39; header is present on the requested resource. Origin &＃39;http://127.0.0.1:8828&＃39; is therefore not allowed access.,当然&＃xff0c;也不排除其它报错情况。上面的http-server可以帮你解决跨域问题&＃xff0c;但前提是你命令行写正确&＃xff0c;我把上面的跨域地址少写了个www&＃xff0c;结果就报上面的错误。

css、js没执行 or 一片空白

有时候打包运行时发现一片空白&＃xff0c;这可能就是打包后的css/js的引入问题了。默认的引入方式如图

是绝对路径方式。我们希望是相对路径&＃xff0c;可以把config/index.js中的assetsPublicPath: &＃39;/&＃39;,改为assetsPublicPath: &＃39;./&＃39;,这样再打包出来的就是相对路径了。
运行打包后的项目时&＃xff0c;在非首页页面刷新时直接404

如果你的项目出现这个问题&＃xff0c;那么你的router中一定是把mode定义为history了。定义hash模式则不会出这个问题。难道只能用很丑的hash&＃xff1f;当然不是&＃xff0c;其实vue-router官方文档的HTML5 History 模式对此已有说明&＃xff0c;这个就需要后端的小伙伴帮我们设置一下了。