前后端分离项目的部署之前端 Vue-cli 项目部署

此文适用于 vue-cli 创建的 vue 项目

可能不适用于 vue-vite 脚手架创建的项目

后端 django 项目部署https://blog.csdn.net/weixin_38848757/article/details/114382619

先按我另一篇随笔搭建生产环境https://blog.csdn.net/weixin_38848757/article/details/114325932

• 开发目录下运行如下命令打包项目源码

  npm run build

   

• 将打包好的生产代码上传至服务器，假设目录为/usr/local/projects/project_1/dist，配置nginx.conf

  # find /usr/local -name nginx.conf
  vim /usr/local/nginx/conf/nginx.conf

  将server=>location=>root配置项改为 /usr/local/projects/project_1/dist ，监听地址和端口按实际情况修改，其他不要动参考https://www.cnblogs.com/fengyuexuan/p/11471269.html

  server {
  	listen       8080;        # 监听端口，浏览器访问的 url 中包含的端口号
  	server_name  127.0.0.1;    # 监听地址，改为自己的域名，没域名修改为127.0.0.1
  	
  	location / {    # url 匹配规则，正则形式，/ 代表所有域名为 139.123.1.16:8000 的请求
  	    root /usr/local/projects/project_1/dist;    # html访问路径
              index index.html index.htm;    # html文件名称
  	    try_files $uri $uri/ @router;    # 解决单页面应用刷新404问题
  	}
  }

   

•  （重新）启动 nginx https://blog.csdn.net/weixin_38848757/article/details/114325932

   

使用 docker 部署可以参考https://blog.csdn.net/SGAFPZys/article/details/80863509