12、vue项目部署到服务器

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...")
})