今天我们带大家学习一下如何打包和部署项目。

在项目编写完成之后，我们在项目的根目录下运行以下命令：

npm run build

打包结束之后，我们可以看到项目目录里面多了 dist 夹，这个夹里面就是我们项目打包之后的。

我们在项目的根目录下创建 server.js，用来启动 vue 项目：

const@H__42@ fs =@H__42@ require@H__42@(@H__42@"fs"@H__42@)@H__42@;@H__42@
const@H__42@ path =@H__42@ require@H__42@(@H__42@"path"@H__42@)@H__42@;@H__42@
const@H__42@ bodyParser =@H__42@ require@H__42@(@H__42@"body-parser"@H__42@)@H__42@;@H__42@
const@H__42@ express =@H__42@ require@H__42@(@H__42@"express"@H__42@)@H__42@;@H__42@
const@H__42@ app =@H__42@ express@H__42@(@H__42@)@H__42@;@H__42@
const@H__42@ list =@H__42@ require@H__42@(@H__42@"./mock/list.json"@H__42@)@H__42@;@H__42@

app.@H__42@use@H__42@(@H__42@bodyParser.@H__42@json@H__42@(@H__42@)@H__42@)@H__42@;@H__42@
app.@H__42@use@H__42@(@H__42@bodyParser.@H__42@urlencoded@H__42@(@H__42@{@H__42@ extended:@H__42@ false@H__42@ }@H__42@)@H__42@)@H__42@;@H__42@ // 服务开启后访问指定编译好的dist下的数据@H__42@
app.@H__42@use@H__42@(@H__42@express.@H__42@static@H__42@(@H__42@path.@H__42@resolve@H__42@(@H__42@__dirname,@H__42@ "./dist"@H__42@)@H__42@)@H__42@)@H__42@;@H__42@
app.@H__42@get@H__42@(@H__42@"/todo/list"@H__42@,@H__42@ (@H__42@req,@H__42@ res)@H__42@ =>@H__42@ {@H__42@
  res.@H__42@json@H__42@(@H__42@{@H__42@
    data:@H__42@ list
  }@H__42@)@H__42@;@H__42@
}@H__42@)@H__42@;@H__42@
app.@H__42@get@H__42@(@H__42@"*"@H__42@,@H__42@ function@H__42@(@H__42@req,@H__42@ res)@H__42@ {@H__42@
  const@H__42@ html =@H__42@ fs.@H__42@readFileSync@H__42@(@H__42@
    path.@H__42@resolve@H__42@(@H__42@__dirname,@H__42@ "./dist/index.html"@H__42@)@H__42@,@H__42@
    "utf-8"@H__42@
  )@H__42@;@H__42@
  res.@H__42@send@H__42@(@H__42@html)@H__42@;@H__42@
}@H__42@)@H__42@;@H__42@

app.@H__42@listen@H__42@(@H__42@)@H__42@;@H__42@

运行命令：

node start.js

然后，访问 就可以正常预览项目了。

本节我们带大家学习了项目的打包部署，主要有以下知识点：