利用http-server测试vue-cli打包后的项目

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

项目展示

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

首页分类页详情页

打包测试(搭建服务器)

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

  • 本地搭建Apache服务器

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

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

    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选项说明

     

    • http-server默认启用8080端口,但是这个端口容易和电脑中的某些任务冲突,强烈建议 利用-p 端口号指定一个新的端口。如果你想同时开启两个项目,则两个项目必须指定不同的端口号,否则有一个项目是打不开的。
       
    • 每次都手动打开浏览器?太麻烦了,添加配置项-o,当服务器启动后,将自动打开浏览器。
       
    • what ? 你的项目的请求接口是跨域的?不能直接访问? 当然,我这个项目也是跨域获取的唯妮海购的接口,如何解决跨域这个问题呢?添加-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没执行 or 一片空白

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

    是绝对路径方式。我们希望是相对路径,可以把config/index.js中的assetsPublicPath: '/',改为assetsPublicPath: './',这样再打包出来的就是相对路径了。

    图片描述
     

  • 运行打包后的项目时,在非首页页面刷新时直接404

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

 

  • 其它问题

     
    每个人的项目不同,配置不同,环境不同...可能还会遇到各种各样的问题,这里不可能一一列举,其实这些问题网上基本上都有解决方法,还是那句话,请善用 google or baidu。

对打包后代码的思索

因篇幅原因,请移步本文续篇vue-cli打包后的思索--代码优化

vue2.0仿唯妮海购GitHub

阅读 11.7k

推荐阅读
冰扬
用户专栏

放低姿态、努力进取、勇于探索、乐于分享

10 人关注
8 篇文章
专栏主页