想要将自己的毕设放在自己买的服务器上，该项目前端由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帮我们打包出来的
解决图片无法显示问题
- 换成变量加载
imageList: [
'view1.jpg',
'view2.jpg',
'view3.jpg',
],
getImageUrl(imageName) {
return require(`@/assets/img/${imageName}`);
},
- 提前require加载|
const imageList = [
require('@/assets/img/view1.jpg'),
require('@/assets/img/view2.jpg'),
require('@/assets/img/view3.jpg'),
];
- 静态加载
'/assets/img/view1.jpg',
'/assets/img/view2.jpg',
'/assets/img/view3.jpg',
后端数据库部分
事前准备：
- 数据库首先导出sql可执行语句文件，方便我们在云端数据库执行
- 运行
pip freeze > requirements.txt生成 requirements.txt方便docker打包容器
这里踩了个雷，在开始项目的时候没有用venv去隔离环境，导致最后生成的全局pip依赖，最后为了优雅，重新隔离开安装了一次
- 编写Dockerfile （最后还没部署docker，因Windows10版本问题） 暂时用nohup去代替
- 最后遇到ttf字体确实用下面这个方法解决
https://blog.csdn.net/weixin_39929377/article/details/110547982 - 最后成功部署，但部署后仍有问题，时间也已经不早啦，该下班咯~