1、配置文件
- 我们写Vue项目与后台数据交互是跨域的，vue项目部署到服务器之后就不是跨域的，需要修改路径（开发环境一个路径，生产环境又是另一个路径），所以就要配置以下两个文件，一起进行打包
| 配置文件 | |
| 开发环境 | .env.development |
| 生产环境 | .env.production |
注意：命名变量必须以VUE_APP_XXX命名
.env.development文件：
VUE_APP_BASE_URL="http://127.0.0.1:3000"
.env.production文件：
VUE_APP_BASE_URL=""
APP.vue：
<script> import axios from "axios"; export default { created() { this.getUserList(); }, methods: { // 1、获取用户列表 getUserList() { axios.get(`${process.env.VUE_APP_BASE_URL}/user/`).then((res) => { this.userList = res.data; }); }, // 2、删除用户信息 del(id) { this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) // 删除成功 .then(() => { axios .delete(`${process.env.VUE_APP_BASE_URL}/user/${id}`) .then(() => { this.getUserList(); }); this.$message({ type: "success", message: "删除成功!", }); }) // 删除失败 .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, // 3、添加用户信息 add() { axios .post(`${process.env.VUE_APP_BASE_URL}/user/`, { user: this.userAddForm, }) .then(() => { this.getUserList(); this.dialogVisible = false; this.$message({ type: "success", message: "添加成功!", }); }) .catch(() => { this.$message({ type: "info", message: "已取消添加", }); }); }, }, data() { return { // 显示用户信息 userList: [], // 添加用户信息弹出框按钮 dialogVisible: false, // 添加用户信息表单 userAddForm: { id: "", name: "", age: "" }, }; }, }; </script>
2、vue项目打包（ npm run build）
- 打包之后会生成dist文件，里面的静态资源就打包好了
3、把打包好的文件放到服务器的public文件夹中，运行服务器即可
server.js：
const Koa = require('koa'); // 获取post请求数据 const parser = require('koa-parser'); // 设置路由 const Router = require('koa-router') const router = new Router(); // 允许跨域 const cors = require("koa2-cors"); // 引入静态文件 const static = require("koa-static"); const app = new Koa(); // 引入中间键 app.use(cors({ origin: function (ctx) { var allowCors = ['http://localhost:8080', 'http://localhost:8081']; return allowCors.indexOf(ctx.header.origin) > -1 ? ctx.header.origin : ''; }, exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'], maxAge: 5, credentials: true, allowMethods: ['GET', 'POST', 'DELETE'], allowHeaders: ['Content-Type', 'Authorization', 'Accept'], })) app.use(parser()); app.use(router.routes()); app.use(static(__dirname + "/public")); // 模拟数据 const userList = [ { id: 1, name: "jasmine", age: 18 }, { id: 2, name: "qiqi", age: 20 }, { id: 3, name: "jasmine_qiqi", age: 22 },]; // get方法：获取userList列表 router.get("/user", async ctx => { ctx.body = userList; }) // post方法：添加user信息 router.post("/user", async ctx => { // request：请求响应数据 let user = ctx.request.body.user; userList.push(user); ctx.body = true; }) // put方法：修改数据 router.put("/user/:id", ctx => { let index = ctx.params.id; let user = ctx.request.body.user; userList.splice(index, 1, user); // splice(要删除元素的索引，删除几个元素，将删除的元素替换) ctx.body = userList; }) // delete方法：删除user信息列表 router.delete("/user/:id", async ctx => { let id = ctx.params.id; userList.map((value, index) => { if (value.id == id) { userList.splice(index, 1); } }) ctx.body = true; }) app.listen(3000, () => { console.log("server is running...") })
