vue+koa迁移到服务器流程

1. koa首先需要调整端口号，不能和服务器上别的服务同端口
2. 云服务器上开放端口，安全组开放
3. vue上做代理，然后npm run build，上传nginx服务器
4. 服务器上配置域名，做解析，最重要的是做代理配置

koa里面，如果连接的是本地数据库，可以使用127.0.0.1连接，如果连接外部数据库就需要使用外链数据库

vue跨域代理上，需要配置外网koa的api接口地址

vue发布到nginx需要配置反向代理，当访问/api的时候，实际是访问koa提供的外网api接口

上面是以前的做法，现在都是将生成的html单页直接放到koa的3000端口服务器下面，然后用nginx做个反向代理即可。

1. 开发环境中，封装axios，加上baseURL，代码如下 ```

const axios = require("axios");
const http = axios.create({
    baseURL: process.env.VUE_APP_API_URL || "/api",
    //这里的意思是，如果是调试开发环境，就用后面的.env.development里面的路径，生产环境就用api
  });
module.exports=http;
main.js里面引用即可
import http from "./http.js"
Vue.prototype.$http=http;

2. vue配置.env.development环境变量
   VUE_APP_API_URL = http://localhost:3000/api
   这样的话，开发环境和生产环境，就都可以正常访问和使用，前期规划很重要

3. vue.config.js里面配置发布路径，代码如下

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ?
    '/admin/' :
    '/',    //这里主要是解决css,js的路径问题，生产环境就加上admin路径，开发环境就不加
  outputDir:__dirname+"/../koa/admin",  //npm run build直接生成到koa的admin目录里
  devServer: {
    proxy: {
      '/tuchuang': {
        target: 'https://jsonplaceholder.typicode.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/tuchuang": ""
        }
      },
    }
  },
}
这个是包括跨域的部分了

这样配置完，前端部分就配置完成了

4. 下面是后端koa方面的配置，需要设置静态托管，设置虚拟目录等
   静态托管中间件npm i koa-static
   设置虚拟目录中间件，npm i koa-mount
   app里记得引入
   const static = require('koa-static');
   const mount = require('koa-mount')
   app.use(mount('/admin',static(__dirname+"/admin") ))
   这里的意思是，设置一个虚拟目录admin，
   后端访问admin目录的时候才访问生成的静态资源，
   静态资源通过static(__dirname+"/admin")来识别判断

5. nginx部分，设置一个反向代理，当访问域名的时候，直接代理到http://localhost:3000上面