使用Nginx部署多个前端Vue项目
Nginx部署多个Vue项目第一步:vue项目中的配置第二步:修改Nginx上的配置文件最后:暂停nginx服务,重新开启即可。第一步:vue项目中的配置1. 创建vue.config.js 文件(该文件会被 @vue/cli-service 自动加载)详情见:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E
·
Nginx部署多个Vue项目
前言:
- 细心很重要,其次就是对vue cli 生成的项目目录,了解多少,项目启动后,文件目录的文件,是怎么顺序被执行…
第一步:vue项目中的配置
- 1. 创建vue.config.js 文件(该文件会被 @vue/cli-service 自动加载)详情见:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
- 2. 路由文件中配置,
- 3. 在public中的index.html 配置
第二步:修改Nginx上的配置文件
- 1. 进入nginx目录下,在html文件夹下创建目录(这里的文件名zhong),然后将npm run build 打包后生成的dist文件夹中的文件copy到新创建的目录~zhong即可。(个人推荐,上传文件或创建文件夹使用fileZilla,将桌面的文件,拖到服务器对应的位置即可)
- 2. 修改nginx下的配置文件(我自己一共配置了三个前端项目)
最后:暂停nginx服务,重新开启即可。
- 1. 启动nginx的命令为 /usr/local/nginx/sbin/nginx
- 2. 停止nginx的命令为 /usr/local/nginx/sbin/nginx -s stop
- 访问:http://域名/zhong/ 或 http://ip:端口号/zhong/(细节很重要,域名后面的名称末尾不要忘记斜杠!)
若你是第一次配置,可以先配置一个项目的配置,其中有部分知识解析,见我另一篇:
https://blog.csdn.net/qq_41930094/article/details/118153719?spm=1001.2014.3001.5502
更多推荐
已为社区贡献5条内容
所有评论(0)