序

像前端使用 vue 等项目前端打包后，需要发布到服务器上正常才能算成功。

上传到远程服务器的有时候可能会受到一些条件限制，而自己又想验证打包后的项目效果，此时就可以在本地进行服务部署。

本次介绍一下三种方式：

1. pushstate-server
   

2. 静态页面

3. express-generator
   

pushstate-server

我使用vue cli构建的项目，并且使用了vue-router进行路由导航。

项目就是《keep-alive+ 导航守卫让缓存更精确》这篇文章中的小说阅读器。

打包的方式就是正常的yarn build命令，build 的 script 是："build": "vue-cli-service build"。

并且对vue.config.js文件中的pubilcPath要写成相对路径，publicPath: process.env.NODE_ENV === 'development' ? '/' : './',

然后一切正常，打包出现了 dist 包。

现在直接打开dist文件夹中的index.html文件，发现是一片空白的， 并且此时 F12 控制台中没有报错，说明相对路径修改是正确的，并且在网络请求中看，各种 css 和 js 文件都已经被返回了。

以上说明，现在需要部署了。

这里可以使用pushstate-server，npm 地址：https://www.npmjs.com/package/pushstate-server

可以创建一个测试项目，使用yarn add pushstate-server进行下载，将dist文件夹放入测试项目中，然后写一个app-server.js。

app-server.js 代码：

var server = require('pushstate-server'); server.start({  port: 4399,// 设置端口号  directory: './dist'});

使用nodemon app-server.js运行脚本，然后在网页中输入 http://localhost:4399/，打开页面就能发现打包项目成功可以看到了

静态页面

当然，如果想要最快看到效果，直接打开 index.html 就能看到效果也是可以。

在上面第一种方法页面直接打开一片空白，失败的原因其实很简单，不是由于文件路径问题。

而是我使用了vue-router，并且模式是history。

路由模式有两种，一种是hash，一种是history

这两种模式最明显的区别就是 url 中是否有#，hash是有井号的。

参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

使用 history 模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务端没有做相应的配置。

这时，可以将路由模式进行转换：

const router = new VueRouter({  mode: 'hash',  base: process.env.BASE_URL,  routes})

这样，重新打包后，就能直接在打开 index.html 了。

express-generator

这是主要通过 nodejs 和 express 来进行搭建。express-generator是 express 应用生成器，相当于 express 的骨架，进入一个 web 项目中后，使用 express projectname 命令，能快速构建 projectname 这个应用的目录结构。

全局安装express和express-generator

命令：yarn add express express-generator -g

然后使用express 项目名创建一个测试项目。

此时该测试项目还不能运行，需要yarn下载一下必要的包。根据package.json中的命令"start": "node ./bin/www", 在终端中使用yarn start运行命令

可以在http://localhost:3000/ 成功运行了

现在可以将 dist 文件夹下的内容 copy 到 public 文件夹下面了，这样运行yarn start。在 localhost:3000 下就能成功看到项目的界面了，本地测试成功。

以上三种就是较为简单的项目打包文件本地测试方法，学习并记录。