koa2+vue+nginx部署

前言

【音乐博客】1.0部署

阵阵键盘声，隐隐测试言。产品不稳定，今夜无人还。

三个方面

1. koa2+vue部署

将vue路由切换成**mode: 'history'，**部署的时候，一刷新就会报404，因为服务端找不到该路径
将vue打包的dist文件夹丢进koa2的public文件夹下，然后打开复制到app.js
const Koa = require('koa') const app = new Koa() const views = require('koa-views') const json = require('koa-json') const onerror = require('koa-onerror') const bodyparser = require('koa-bodyparser') const logger = require('koa-logger') var mysql = require('mysql'); const cors = require("koa-cors"); //可以写ajax实现实现异步跨域，在表头加上http头
```
app.use(cors());

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text'],
  multipart: true
}))  
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))

module.exports = app
```
主要讲一下，这样koa就会读public，默认指向index.html
```
app.use(require('koa-static')(__dirname + '/public'))
```
这样就可以运行app.js就可以实现koa2部署vue项目
结果一刷新报错404，因为vue路由是history模式
使用koa的 koa2-connect-history-api-fallback解决
安装：
npm i koa2-connect-history-api-fallback --save-dev
app.js引入
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
在引入静态文件之前use使用historyApiFallback
app.use(historyApiFallback());
即整个app.js代码如下：

const Koa = require('koa') const app = new Koa() const views = require('koa-views') const json = require('koa-json') const onerror = require('koa-onerror') const bodyparser = require('koa-bodyparser') const logger = require('koa-logger') var mysql = require('mysql'); const cors = require("koa-cors"); //可以写ajax实现实现异步跨域，在表头加上http头 const { historyApiFallback } = require('koa2-connect-history-api-fallback');

// error handler
onerror(app)

app.use(cors());

const koaBody = require('koa-body');
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 200*1024*1024*3,    // 设置上传文件大小最大限制，默认6M
        multipart: true
    }
}));

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text'],
  multipart: true
}))  
app.use(json())
app.use(logger())

app.use(historyApiFallback());

app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
// app.use(index.routes(), index.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

koa2-connect-history-api-fallback缺点
现在刷新是不会报错404了，但是他一刷新会先跳到首页，然后在跳到你当前的路由上，这样看着就很不好了
所以接下来再配合nginx

2. koa2+vue+nginx部署

将vue打包的dist放在nginx的html文件下
nginx/conf/nginx.conf文件配置

worker_processes 1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    #gzip  on;

upstream koa.server{
  server localhost:3000;
}
    server {
        listen       9527;    #这是你的线上的端口
        server_name  yourdomain.com;    #这里修改成自己的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
        }

		 # 静态资源目录，即vue打包后的dist里的静态资源
        root  /usr/local/nginx/html;
        index  index.html index.htm;

		# 后端服务的配置

        location // {
				proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                # 后端服务地址
                 proxy_pass http://localhost:3000;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

这样配下来，就完美解决刷新404，而且不会刷新先到登录页面再到当前路由上

3. ttf压缩【字蛛】

字体文件太大，打包之后，进入系统，字体需要等到10s才加载出来（12M的ttf文件）
我的解决方案是：使用【字蛛】来解决加载缓慢
原理是：将我网页没有使用的文字从ttf里面删除，需要什么文字就加载出来。
安装
npm install font-spider -g
index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: abc;
            src:url('../../vue-typescript-admin-template-master\src\assets\fzzj-hfxcjw\FZZJ-HFXCJW.TTF')
        }
        body{
            font-family: "abc";
        }

    </style>
</head>
<body>

    <span>歌手榜轻音乐05月31日更新，轻音乐榜</span>
</body>
</html>

这里要确保ttf文件一定要有，其他的不管
接下来就是最后一步了生成新的字体库
nodejs命令行输入
font-spider C:\Users\wangchao\Desktop\index*.html
也就是你的html完整路径【*】是通配符，表示会扫描所有的html文件
这样就成功了，在你原来的字体文件目录下会多出相应的压缩之后的字体文件，发现小了很多吧
然后你再引用相关的新的字体文件就行了

原文地址

juejin.cn/post/684490…

参考

HTML5 History 模式刷新404：可查看vue官网，有对应的后台配置

【ttf压缩】网页开发中引入字体文件过大，加载缓慢的解决办法【字蛛】【web Font】：blog.csdn.net/weixin_3633…