Vue 项目打包部署

发布时间：2023-04-19 10:23:34 所属栏目：教程来源：

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

npm run build
打包结束之后，我们可以看到项目目录里面多了一个 dist 文件夹，这个文件夹里面就是我们项目打包之后的代码。

Node 服务部署
我们在

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

npm run build
打包结束之后，我们可以看到项目目录里面多了一个 dist 文件夹，这个文件夹里面就是我们项目打包之后的代码。

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

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 })); // 服务开启后访问指定编译好的dist文件下的数据
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();
运行命令：

node start.js
然后，访问 http://localhost:8081/#/ 就可以正常预览项目了。

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

利用 npm run build 打包项目。
利用 node 服务部署打包后的项目。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!