Django+Vue项目学习第九篇:vue项目部署到服务器
本篇记录一下如何在Linux服务器部署vue项目
刚开始的时候我犯了一个惯性错误,以为部署vue项目和前面部署django服务一样,需要把vue工程文件拷贝到服务器,然后使用命令启动,如npm run serve
又是安装node环境,又是npm install安装依赖包等,一通操作下来,也没搞定。。。
后来偶然看到一篇文章,解释了vue项目到底该怎么部署(其实问问身边的前端开发就知道怎么回事了)
平时在本地开发时,使用npm run启动项目,这相当于本地开发调试,
而当调试完成,觉得可以部署到生产环境时,需要把项目打包,打包后会生成一堆静态文件,此时只需借助web服务器访问这些静态文件,前端服务就相当于部署好了
并不需要在服务器在搭一套开发环境,然后运行项目代码!!!
1、打包项目文件
在项目目录下执行命令 npm run build 即可,会在项目目录下生成一个dist文件夹,
注意1:打包前,还需要进行如下配置:找到项目的config文件夹下面的index.js,定位到build,将里面的assetsPublicPath改成'./
注意2: 打包前,修改前端调用的后端地址为后端服务所在的地址
最后执行命令 npm run build
可以看到,生成如下dist文件夹
在本地打开index.html,打开后其实就能正常查看前端页面了
打包完成后,把dist整个文件夹传到服务器,我放到了如下地址
/data/apps/datafactoryfront
2、安装配置nginx
关于nginx的安装以及常用命令可以参考如下文章
https://www.cnblogs.com/hanmk/p/9258149.html
https://www.cnblogs.com/pxstar/p/14808244.html
3、配置nginx代理前端静态资源
打开nginx配置文件
配置文件所在路径
/usr/local/nginx/conf/nginx.conf
listen:监听80端口,这里不用改动;
server_name:默认是localhost,指定(虚拟主机)服务器名称,一般会配置域名(example.org ,www.example.org,可以使用精确的名称、通配符名称或正则表达式定义;当你在外网访问一个请求链接时,nginx会根据你填写的主机名称来匹配是转发到server1还是server2);
location:/ 表示匹配路径,这里表示匹配根路径,里面的root表示匹配到服务器下的dist静态资源文件夹;
关于nginx如何转发请求,之前写过一个例子,里面详细进行了介绍
https://www.cnblogs.com/hanmk/p/9290533.html
配置完成后,访问服务器地址,如:http://192.xxx.xxx.xxx 即可正常打开前端服务
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue_(Router路由)-vue-router路由的基本用法
- django-admin配置日志
- Django-权限信息中间件操作
- django之admin设置
- 第三百一十三节,Django框架,Session
- VS2013中Python学习笔记[Django Web的第一个网页]
- Django 1.6 的测试驱动开发(转)
- Django中如何使用django-celery完成异步任务1(转)
- Django中如何使用django-celery完成异步任务2(转)
- python-django-redis拒绝连接问题解决_20191121
- [Django] Start a new django project
- Django管理工具django-admin.py创建项目
- Python的Django框架中的URL配置与松耦合
- [Django] Auth django app with rest api
- [Django] Start a new django project
- python django admin.site.register注册应用
- Python Django后台管理模板美化:使用django-simpleui模块
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Django学习11 -- Admin页面级联选择
- Django-admin列表展示上传图片
- django 设置session过期时间
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例