Vue项目打包后部署到express服务器

背景#

有的时候我们在使用vue脚手架开发完项目后想在本地的服务器上运行进行调试，因为有的时候开发时和打包后的效果有些许差异。

步骤#

安装express#

npm install express -save

新增app.js#

在与src文件夹同级新增server文件夹，并在server文件夹下新增app.js,app.js新增如下代码：

const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, '../dist')))
app.listen(8081, () => {
  console.log('app listening on port 8081')
})

修改package.json配置文件#

添加start的快捷运行命令

"scripts": {
  "serve": "vue-cli-service serve --open",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint",
   "start": "node app.js"
 },

运行项目#

执行 npm run start 运行服务器，打开浏览器输入 localhost:8081 便可以访问到项目

注意#

如果使用vue-router的history模式，需要使用connect-history-api-fallback中间件
官方解释： 当你使用 history 模式时，URL 就像正常的 url，不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问地址栏中的文件 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

首先安装 connect-history-api-fallback

npm install --save connect-history-api-fallback

然后修改 server/app.js

const express = require('express')
const path = require('path')
const app = express()

// vue-router history模式引入connect-history-api-fallback中间件
const history = require('connect-history-api-fallback')

// 这句代码需要放在express.static上面
app.use(history())

app.use(express.static(path.join(__dirname, '../dist')))

app.listen(8081, () => {
  console.log('app listening on port 8081')
})