Vue 項(xiàng)目打包部署

1. 前言

今天我們帶大家學(xué)習(xí)一下如何打包和部署項(xiàng)目。

2. npm run build 項(xiàng)目打包

在項(xiàng)目編寫完成之后，我們在項(xiàng)目的根目錄下運(yùn)行以下命令：

npm run build

打包結(jié)束之后，我們可以看到項(xiàng)目目錄里面多了一個 dist 文件夾，這個文件夾里面就是我們項(xiàng)目打包之后的代碼。

3. Node 服務(wù)部署

我們在項(xiàng)目的根目錄下創(chuàng)建 server.js，用來啟動 vue 項(xiàng)目：

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

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); // 服務(wù)開啟后訪問指定編譯好的dist文件下的數(shù)據(jù)
app.use(express.static(path.resolve(__dirname, "./dist")));
app.get("/todo/list", (req, res) => {
  res.json({
    data: list
  });
});
app.get("*", function(req, res) {
  const html = fs.readFileSync(
    path.resolve(__dirname, "./dist/index.html"),
    "utf-8"
  );
  res.send(html);
});

app.listen(8081);

運(yùn)行命令：

node start.js

然后，訪問 http://localhost:8081/#/ 就可以正常預(yù)覽項(xiàng)目了。

4. 小結(jié)

本節(jié)我們帶大家學(xué)習(xí)了項(xiàng)目的打包部署，主要有以下知識點(diǎn)：

• 利用 npm run build 打包項(xiàng)目。
• 利用 node 服務(wù)部署打包后的項(xiàng)目。