Artikelverzeichnis
01-Lösen Sie zuerst das domänenübergreifende Problem auf dieser Maschine
方法一 在前端解决：
在vue.config.js中使用devServer
axios中的url 必须遵循相应写法
关于devServer的详细配置 请百度
Problem: Wenn Sie online gehen (auf dem Cloud-Server bereitgestellt), wird der verpackte vue3 devServer nicht verpackt, was dazu führt, dass der Proxy domänenübergreifend fehlschlägt.
方法二：
不在前端解决 在后端django解决
1.安装第三方扩展
pip install django-cors-headers
在settings.py文件中进行如下设置
2.添加应用
INSTALLED_APPS = (
...
'corsheaders',
...
)
3.中间件处理,注意放在第一条,会第一时间进行处理
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
4.配置访问规则或白名单:
# 允许所有域名跨域(优先选择)
CORS_ORIGIN_ALLOW_ALL = True
# 或配置白名单
# CORS_ORIGIN_WHITELIST = (
# '*'
# # '127.0.0.1:8000',
# # 'localhost:8000',
# # '127.0.0.1:8080',
# # 'localhost:8080',
# # 'ads-cms-api.aataotao.com:8000' #
# # 'taoduoduo-test.oss-cn-shenzhen.aliyuncs.com:80', # 线上
# # '10.0.2.187:8080' # 本地
# )
5.允许携带cookie
CORS_ALLOW_CREDENTIALS = True
6.使用nginx可能要配置别的
详情请看参考2
但是我的云服务器也用了nginx，并没有配置参考2的内容，也成功了。
Die erste Methode, die ich verwendet habe, war die Konfiguration von devServer. Beim Packen des Front-Ends wird der devServer jedoch nicht gepackt, d. h. er wird ungültig, da der devServer für die Entwicklung verwendet wird. Dann suchte Baidu viele Lösungen und sagte, die nginx .config-Datei des Cloud-Servers zu konfigurieren, aber es funktionierte immer noch nicht, nachdem ich es konfiguriert hatte, also benutzte ich die zweite Methode, um das domänenübergreifende Problem am Backend zu lösen .
先在本地解决好跨域问题，我出现的问题主要是上传云服务器之后 一直出现跨域问题。
02-Cloud-Server-Einführung
我使用的是腾讯云服务器
服务器相当于另一台电脑，只不过是在云上。
其实可以远程登录云服务器，打开发现和你自己的电脑一样。
也就意味着你不需要打包前端，打包后端，然后上传到云服务器上。
可以在云服务器上下载java python vue3 django 甚至是vscode idea pycharm
复制粘贴你的代码上去
但是，上线意味着你的项目要能在不同的电脑上运行，如果换一个电脑，就要再配置一下环境，重复上述操作。
这样就很麻烦。
如何做到不用配环境？那就打包。
打包会将携带的环境同样打包，不需要再在不同的电脑上配环境了。
打包完成之后，将包上传到云服务器，使用命令在后台一直运行就可以了。
03- Bereitstellen des Projekts online auf dem Cloud-Server-Schritt
(1) Verpacken des Frontends
跨域使用方法二，那么前端不需要配置devServer。
打包前端之前，要将所有的axios的url中的ip改为服务器的ip 端口号就是django在本机运行时的端口号
比如：
假如我的服务器的ip地址是121.5.151.98
在本机运行django时，显示的端口号是8000
那我就这样写：
axios
.post('http://121.5.151.98:8000/login', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: account.value,
emulateJSON: true
})
.then((res) => {
} else {
}
})
.catch((err) => {
console.log('错误信息：' + err)
})
注意：我在服务器打开前端时，出现无法访问前端资源路径的问题，
百度之后，将router的createWebHistory改为createWebHashHistory就好了，这里的原因我不是很清楚。
然后在vscode运行指令 npm run build
出现dist文件夹 即为打包的文件夹
(2) Packen des Backends
1、安装pyinstaller
pip install pyinstaller
2、在setting.py文件中添加 ALLOWED_HOSTS = ['*'] 允许所有ip访问
这个东西不知道是否真实有用，不过我加了。
3、修改settings.py文件中关于数据库的设置
主要是修改数据库名 用户名和密码
这些要和你的服务器上的数据库的配置一致，关于在服务器上安装配置mysql，看后面。
我用的是mysql
其他关于数据库的配置不用修改
4、制作.spec文件
pyi-makespec -D manage.py
5、manage.spec文件中要加 hiddenimports=['app01.apps']
你用的哪个模块
本来hiddenimports=[] 但是在服务器运行后端出错 module name啥的
百度了一下要加这个 每个人的module不一样
5、开始打包
pyinstaller manage.spec
打包结束后 出现dist文件夹和build文件夹
只需上传dist文件夹即可
(3) Cloud-Server
网上有有很多是用一些软件如xshell
我提供一个：win+r
打开之后就和你自己的电脑一样。
宝塔面板相当于一个控制你的云服务器的面板
即你可以不用上述方式打开云服务器，直接使用宝塔面板进行软件的下载等。
百度 云服务器部署 你就可以看到很多步骤解释
我是宝塔面板和上面远程登录服务器同时使用
ps:因为我用的windows版云服务器，就比较麻烦，有可视化界面
如果是linux版 可能只要输入命令就好了--->百度
打开一下宝塔面板
最开始打开时 会让安装mysql ngnix等 百度步骤就好
这样 在浏览器地址栏输入服务器ip地址就会打开前端项目
如何运行后端项目？
我是远程打开云服务器 运行后端
manage.exe runserver --noreload 0.0.0.0:8000
可以在后台一直运行后端项目，这样关闭远程连接时 后端项目不会关闭
命令好像是
怎么让程序在windows后台运行
在执行的命令前加上start /b，比如start /b run.bat。就相当于Linux下的run.sh &。
不用后台运行也可以。关闭远程登录也会运行。
04-Zusammenfassung
如上结束
因为我用的是windows版的云服务器 网上的教程很少
我看了很多 搞了很久 才搞好的
网上很多都是Linux版的云服务器
应该买Linux版的云服务器 主要是资源占用少 服务器运行不卡
如有其他问题，请大家自行查百度。多看看，多尝试，多思考错误，就会了。