部署服务器上线部分

想要将自己的毕设放在自己买的服务器上，该项目前端由vite+ts支持，后端使用python flask，数据库是MySQL8.0；
部署分成以下步骤，前端UI部分，后端数据库部分，服务器命令调试部分
目前项目已经完成部署，来我的网站看看吧：https://www.8765430.xyz/

前端UI部分

修改tsconfig.json 在build的时候不会报各种error，包括但不限于anyType、alias别名有可能在vite.config.ts或者tsconfig.json中都要配置，以下提供一份简略的配置：

tsconfig.json

点击查看代码

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": false,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "allowJs": true,
    "noImplicitAny": false,
    "moduleResolution": "Node",
    "strict": false,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "*.vue",
    "*.ts",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

vite.config.ts

点击查看代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

export default defineConfig({
  base: './',
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src'),
    },
  },
  plugins: [
    vue(),
    VueSetupExtend(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  optimizeDeps: {
    include: ['schart.js'],
  },
})

额外的，在vite.config.ts 开启了 gzip 压缩（优化打开时间达到毫秒级）

npm i vite-plugin-compression --save-dev

import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    compression({
      verbose: true,
      disable: false,
      threshold: 10240, // 压缩阈值，小于这个值的文件将不会被压缩（单位为字节）这里就是大于 10kb 菜压缩
      algorithm: 'gzip', // 压缩算法
      ext: '.gz', // 压缩文件后缀名
    }),
  ],
});

在运行 npm run build 后可以发现文件夹下多出了一个dist文件夹，里面就是vite帮我们打包出来的

解决图片无法显示问题

1. 换成变量加载

 imageList: [
        'view1.jpg',
        'view2.jpg',
        'view3.jpg',
      ],
	  
 getImageUrl(imageName) {
      return require(`@/assets/img/${imageName}`);
    },

2. 提前require加载|

const imageList = [
  require('@/assets/img/view1.jpg'),
  require('@/assets/img/view2.jpg'),
  require('@/assets/img/view3.jpg'),
];

3. 静态加载

  '/assets/img/view1.jpg',
  '/assets/img/view2.jpg',
  '/assets/img/view3.jpg',

后端数据库部分

事前准备：

1. 数据库首先导出sql可执行语句文件，方便我们在云端数据库执行
2. 运行 pip freeze > requirements.txt 生成 requirements.txt方便docker打包容器

这里踩了个雷，在开始项目的时候没有用venv去隔离环境，导致最后生成的全局pip依赖，最后为了优雅，重新隔离开安装了一次

3. 编写Dockerfile （最后还没部署docker，因Windows10版本问题） 暂时用nohup去代替
4. 最后遇到ttf字体确实用下面这个方法解决
   https://blog.csdn.net/weixin_39929377/article/details/110547982
5. 最后成功部署，但部署后仍有问题，时间也已经不早啦，该下班咯~