实现 AcApp 端

理论基础

我们编写好的前端代码可以打包成两个文件: 一个 js 文件和一个 css 文件,
那么任何一个可以访问到这两个文件的地方(Web,小程序,AcApp)都可以运行我们的前端代码.

我们要做的就是：
1. 将应用打包成两个文件.
2. 提供一个主类的名字.

具体工作如下：

1. 检查并修改自己的 vue 版本为 5.0.8

npm i -g @vue/cli@5.0.8

2. 重新配置 nginx

目的为解决跨域问题(当前端的静态文件和后端不在同一个域名下就会出现) 以及支持 acapp 端.

3.创建新的项目

走 vue ui 进行项目的搭建,并安装插件

bootstrap, @properjs/core, vue3-ace-editor,jquery
更改配置文件vue.config.js 的内容：
作用: 让vue3将项目打包成一个js文件和一个css文件.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    // No need for splitting
    optimization: {
      splitChunks: false
    }
  }
})

删除掉原本的 src 文件夹,
然后将 web 项目下的 src 文件夹复制过去.

4. 打包

1. build 打包
2. 处理对应的 js 文件
   
   3.添加主类
   

export class Game {
  constructor(id, AcWingOS) {
    const myappid = '#' + id;
    myfunc(myappid, AcWingOS);
  }
}

1. 将对应的文件上传到云端服务器
   为了简化操作,这里可以写一个脚本来完成.

scp dist/js/*.js springboot:kob/acapp/
scp dist/css/*.css springboot:kob/acapp/
ssh springboot 'cd kob/acapp  && ./rename.sh'

1. 增加应用的主类名和图标.

5. 删除掉第三方的样式以及 vue 自己带的一个 router

改为自己手写
手写 router:

6. 上线后,实现缓存强制清除

每次更新后,
保证打包后的 js 文件和 css 文件的路径变了即可
简单实现 文件名+版本号