- koa首先需要调整端口号，不能和服务器上别的服务同端口
- 云服务器上开放端口，安全组开放
- vue上做代理，然后npm run build，上传nginx服务器
- 服务器上配置域名，做解析，最重要的是做代理配置
koa里面，如果连接的是本地数据库，可以使用127.0.0.1连接，如果连接外部数据库就需要使用外链数据库
vue跨域代理上，需要配置外网koa的api接口地址
vue发布到nginx需要配置反向代理，当访问/api的时候，实际是访问koa提供的外网api接口
上面是以前的做法，现在都是将生成的html单页直接放到koa的3000端口服务器下面，然后用nginx做个反向代理即可。
- 开发环境中，封装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;
-
vue配置.env.development环境变量
VUE_APP_API_URL = http://localhost:3000/api
这样的话，开发环境和生产环境，就都可以正常访问和使用，前期规划很重要 -
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": ""
}
},
}
},
}
这个是包括跨域的部分了
这样配置完，前端部分就配置完成了
-
下面是后端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")来识别判断 -
nginx部分，设置一个反向代理，当访问域名的时候，直接代理到http://localhost:3000上面
网友评论