今天我们带大家学习一下如何打包和部署项目,今天小编就来聊一聊关于vue项目手动安装教程交流:39Vue入门教程Vue项目打包部署?接下来我们就一起去研究一下吧!

vue项目手动安装教程交流:39Vue入门教程Vue项目打包部署

vue项目手动安装教程交流:39Vue入门教程Vue项目打包部署

1. 学习目标

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

2. npm run build 项目打包

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

npm run build

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

3. 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(8081);

运行命令:

node start.js

然后,访问 http://localhost:8081/#/ 就可以正常预览项目了。

4. 小结

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

,