midway后端静态文件托管前端部署代码教程

涉及到的修改文件有configuration.ts、与configuration.ts同级目录的index.ts文件，view文件夹；config.default.ts；前端代码中需要修改vite.config.ts、

#1、configuration.ts中引入staticFile、view-ejs

import { Configuration, App } from '@midwayjs/decorator';
import * as staticFile from '@midwayjs/static-file';
import * as view from '@midwayjs/view-ejs';
@Configuration({
  imports: [
    // 模板渲染 http://midwayjs.org/docs/extensions/render
    view,
    // 静态文件托管 http://midwayjs.org/docs/extensions/static_file
    staticFile,
  ]
})

#2、打开与src同级的view，新建前端托管专用文件夹frontEnd，放前端打包后的代码用

#3、config.default.ts配置view和staticFile

export default {
  // 模板渲染
  view: {
    defaultViewEngine: 'ejs',
    mapping: {
      '.html': 'ejs',
    },
  },
//静态托管文件夹
  staticFile: {
    dirs: {
      default: {
        prefix: '/index',
        dir: 'view/frontEnd',
      }
    },
  },
  },  
} as
  | MidwayConfig
  | {
      cache: any;
    };

#4、与configuration.ts同级目录的index.js中修改

import { Controller, Get, Inject } from '@midwayjs/decorator';
import { Context } from '@midwayjs/koa';

/**
 * 登录界面
 */
@Controller('/')
export class IndexController {
  @Inject()
  ctx: Context;
  // 模板渲染路径
  @Get('/')
  @Get('/*')
  async index(): Promise<string> {
    return this.ctx.render('frontEnd/index.html');
  }
}

#5、前端代码中对应修改vite.config.ts、vue-router配置

##vite.config.ts中base的修改

export default async ({ mode }): Promise<UserConfig> => {
// dev开发环境base为'/',/index/为打包时候用，如果是用webpack，也一样修改对应的baseUrl即可
// 是否开发环境
const isdev = mode == "development";
//是否静态拖管到后端
const isBackEndStatic=true
// 根据是否为开发环境和后端服务器托管定义baseUrl
const baseUrl = isdev ? "/" : isBackEndStatic ? "/index/" : "/";
return {
  base: ‘baseUrl,
  },
})

vue-route中router配置修改base

// 路由
//是否静态拖管到后端
const isBackEndStatic=true
router: {
// 是否静态托管，对应托管路径
base: isBackEndStatic ? "/index/" : "/",
// 模式
mode: "history",
},

#6、前端代码运行npm run build；打包完成后，复制dist文件夹中的全部文件到第2步在后端view文件夹中建好的frontEnd文件夹内，然后部署后端，部署完成后，打开后端网址即可访问网站