序

像前端使用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下就能成功看到项目的界面了，本地测试成功。

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