preface

  • 【 Music Blog 】1.0 the deployment

Bursts of keyboard sound, faint test speech. The product is unstable and nobody returns it tonight.

Three aspects:

1. Koa2 + vue deployment

  • Switch the vUE route to **mode: ‘history’. When ** is deployed, it will be 404 when refreshed because the server cannot find the path

  • Drop vUE’s packaged dist folder into koA2’s public folder, then open and copy to 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”); // You can write ajax implementations to implement asynchronous cross-domain, adding HTTP headers to table headers

    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 = appCopy the code

  • Basically, koA will read public, which by default points to index.html

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

  • This allows you to run app.js to implement the KOA2 deployment VUE project

  • Error 404 is displayed because the VUE route is in history mode

  • Use koA’s KOA2-connect-history-apI-fallback solution

  • Installation:

  • npm i koa2-connect-history-api-fallback –save-dev

  • App. Js introduction

  • const { historyApiFallback } = require(‘koa2-connect-history-api-fallback’);

  • Use use historyApiFallback before importing static files

  • app.use(historyApiFallback());

  • That is, the entire app.js code is as follows:

  • 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”); 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, // Set the maximum file size limit, default 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 = appCopy the code

  • Koa2 – connect – history – API – fallback shortcomings

  • Now it will not report a 404 error, but when it refreshes it will jump first to the home page and then to your current route, which will look bad

  • So let’s work with Nginx

2. Vue koa2 + + nginx deployment

  • Place the VUE packaged Dist in the HTML file of Nginx

  • Configure the nginx/conf/nginx.conf file

  • 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; # This is your online port 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; } # root /usr/local/nginx/ HTML; index index.html index.htm; {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; }}}Copy the code

  • This is the perfect way to refresh 404 without refreshing the login page and then the current route

3. TTF compression

  • The font file is too large. After packaging, the font will be loaded in the system for 10s (12M TTF file).

  • My solution: use word spider to deal with slow loading

  • The principle is: I do not use the text from TTF inside the deletion, what text needs to load out.

  • The installation

  • npm install font-spider -g

  • index.html

  • <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> @background-color: RGB (255,255,255); src:url('.. /.. /vue-typescript-admin-template-master\src\assets\fzzj-hfxcjw\FZZJ-HFXCJW.TTF') } body{ font-family: "abc"; } </style> </head> <span> </span> </body> </ HTML >Copy the code

  • Make sure the TTF file is there, and nothing else

  • The next step is to generate the new font library

  • Nodejs command line

  • font-spider C:\Users\wangchao\Desktop\index*.html

  • Your full HTML path [*] is a wildcard character, indicating that all HTML files are scanned

  • This is successful, in your original font file directory will be corresponding to the compressed font file, notice that it is much smaller

  • Then you can refer to the new font file

The original address

Juejin. Cn/post / 684490…

reference

HTML5 History mode update 404: you can view the vue official website, there is the corresponding background configuration

【 TTF compression 】 web development to introduce the Font file is too large, slow loading solution 【 word spider 】【web Font】 : blog.csdn.net/weixin_3633…